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

我需要在 d3.js 中创建一个箭头，但我找到的只是带有节点图的示例。我需要的是简单地制作一个从 A 点到 B 点的箭头。

我尝试实现以下示例中的部分代码：http://bl.ocks.org/1153292 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");

但正如我之前提到的，我没有找到用 a 创建箭头的方法svg:line非常感谢您能给我的帮助。

如果您的意思是“如何在 元素上使用箭头标记？”那么你可以这样做：

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

这里有一个完整的example http://xn--dahlstrm-t4a.net/svg/markers/simple-marker.svg。并注意marker-end是一个 CSS 属性，因此如果需要，您也可以将该部分放入样式表中。

如果您想用线条绘制标记，则只需添加所需的任何线条作为标记元素的子元素（并确保使用由标记的 viewBox 属性定义的坐标系）。