Javascript 如何在 SVG <line> 元素上使用箭头标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12680166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use an arrow marker on an SVG <line> element?
提问by Cristian G
I need to create an arrow in d3.js, but all I find are examples with diagrams of nodes. What I need is to simply make an arrow that goes from point A to point B.
我需要在 d3.js 中创建一个箭头，但我发现的只是带有节点图的示例。我需要做的是简单地制作一个从 A 点到 B 点的箭头。
I tried implementing part of the code in the following example: http://bl.ocks.org/1153292
我尝试在以下示例中实现部分代码：http: //bl.ocks.org/1153292
This specific part:
这个具体部分：
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");
But as I mentioned earlier, I do not find the way to create the arrow with a svg:linegreatly appreciate the help you can give me.
但正如我之前提到的，我没有找到创建箭头的方法，svg:line非常感谢您能给我的帮助。
回答by Erik Dahlstr?m
If you meant 'how do I use an arrow marker on a <line> element?' then here's how you do that:
如果您的意思是“如何在 <line> 元素上使用箭头标记？” 那么这里是你如何做到这一点：
<line x1="100" y1="230" x2="300" y2="230"
marker-end="url(#yourMarkerId)" stroke="black" stroke-width="10"/>
Here's a full example. And note that marker-endis a css property, so you can also put that part in a stylesheet if you want.
这是一个完整的例子。请注意，这marker-end是一个 css 属性，因此您也可以根据需要将该部分放在样式表中。
If you meant you want to draw your marker with lines, then just add whatever lines you need as a child of the marker element (and make sure to use the coordinate system defined by the marker's viewBox attribute).
如果您想用线条绘制标记，那么只需添加您需要的任何线条作为标记元素的子元素（并确保使用由标记的 viewBox 属性定义的坐标系）。
