如何在一个SVG用箭头标记 元件？(How to use an arrow marker on

我需要创建d3.js箭头，但所有我看到的是同节点图的例子。 我需要的是简单地进行从点前进到B点的箭头

我试着在下面的例子中实现的部分代码： http://bl.ocks.org/1153292

这种特殊的部分：

svg.append("svg:defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

但正如我前面提到的，我不觉得创建一个带有箭头的方式svg:line非常感谢帮助，您可以给我。

Answer 1:

如果你的意思是'我怎么用箭头标记一个<线>元素？ 那么这里是你如何做到这一点：

<line x1="100" y1="230" x2="300" y2="230" 
 marker-end="url(#yourMarkerId)" stroke="black" stroke-width="10"/>

这是一个完整的例子 。 并注意marker-end是一个CSS属性，所以你也可以把那部分的样式表，如果你想要的。

如果你的意思是你想绘制线条您的标记，然后只需添加你需要作为标记元素的子无论行（并确保使用由标记的viewBox属性定义的坐标系）。

文章来源: How to use an arrow marker on an SVG element?