如何在SVG <line>元素上使用箭头标记？

Question

我需要在d3.js中创建一个箭头,但我发现的只是带有节点图的示例.我需要的是简单地制作一个从A点到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>元素上使用箭头标记？" 然后这是你如何做到这一点:

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

这是一个完整的例子.请注意,这marker-end是一个css属性,因此如果需要,您还可以将该部分放在样式表中.

如果您想要用线条绘制标记,那么只需添加您需要的任何行作为标记元素的子元素(并确保使用由标记的viewBox属性定义的坐标系).