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

时间:2012-10-01 19:59:10

标签: javascript d3.js svg graphics

我需要在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创建箭头的方法 非常感谢你能给我的帮助。

1 个答案:

答案 0 :(得分:58)

如果您的意思是“如何在&lt; line&gt;上使用箭头标记?元件?'那你就是这样做的:

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

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

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