相关疑难解决方法(0)

我已经看到了一些使用CSS来影响SVG元素风格的例子,但到目前为止还没有一个例子可以帮助我解决关于标记的问题.老实说,我仍然在研究两者的语法(SVG和CSS).

我想定义一个标记,然后能够在不同的地方使用它,但颜色不同.

例如:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
     viewBox="0 0 180 320">

<defs>
    <marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1">
        <line x1="0" y1="-1" x2="0" y2="1" />
        <line x1="-1" y1="0" x2="1" y2="0" /> 
        <line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" />
        <line x1="-0.7071" y1="0.7071"  x2="0.7071" y2="-0.7071" />
    </marker>
</defs>

.AsteriskMarkerClass { stroke:red; }
    <path d="M 60,100"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

.AsteriskMarkerClass { color:green; }
    <path d="M 90,140"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

</svg>

如果有人可以告诉我如何做到这一点,我将不胜感激.

我试图做明显的事情,让我的有向图的链接的箭头颜色匹配边缘颜色.令人惊讶的是,我没有找到一个完整的解决方案,虽然这个较旧的帖子似乎是一个很好的起点.我可以根据下面的描述调整该解决方案,或者如果有一种创建箭头的优良方法可以实现这种效果,我将非常感激.

首先,我有一个线性渐变颜色函数,通过属性为我的边缘着色,如下所示:

var gradientColor = d3.scale.linear().domain([0,1]).range(["#08519c","#bdd7e7"]);

然后,就像之前的帖子一样,我有一个添加标记的功能:

function marker (color) {
  var reference;
  svg.append("svg:defs").selectAll("marker")
    .data([reference]) 
   .enter().append("svg:marker")    
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)  // This sets how far back it sits, kinda
    .attr("refY", 0)
    .attr("markerWidth", 9)
    .attr("markerHeight", 9)
    .attr("orient", "auto")
    .attr("markerUnits", "userSpaceOnUse")
   .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5")
    .style("fill", color);
  return "url(#" + reference + ")";    };

然后我的链接定义是基于Curved Links示例的链接定义.

var link = svg.selectAll(".link")
  .data(bilinks)
  .enter().append("path")
  .attr("class", "link")
  .style("fill", "none")
  .style("opacity", "0.5")    
  .style("stroke-width", "2")  
  .style("stroke", function(d) { return …