如何在SVG中绘制箭头？

Question

我需要让它变得灵活。它可以是某种类型的线条和线条末端的箭头。

因此，我决定创建两个 SVG 对象：线条和箭头。

如何在线的末尾或开头绘制箭头？

我的路线是：

<svg width="500" height="100">

  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

</svg>

Answer 1

您可以defs使用path-&nbsp;http://jsfiddle.net/jxtfeqag/<svg>&nbsp; <defs>&nbsp; &nbsp; <marker&nbsp;&nbsp; &nbsp; &nbsp; id='head'&nbsp;&nbsp; &nbsp; &nbsp; orient="auto"&nbsp;&nbsp; &nbsp; &nbsp; markerWidth='3'&nbsp;&nbsp; &nbsp; &nbsp; markerHeight='4'&nbsp;&nbsp; &nbsp; &nbsp; refX='0.1'&nbsp;&nbsp; &nbsp; &nbsp; refY='2'&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <path d='M0,0 V4 L2,2 Z' fill="black" />&nbsp; &nbsp; </marker>&nbsp; </defs>&nbsp; <path&nbsp; &nbsp; id='arrow-line'&nbsp; &nbsp; marker-end='url(#head)'&nbsp; &nbsp; stroke-width='4'&nbsp; &nbsp; fill='none' stroke='black'&nbsp;&nbsp;&nbsp; &nbsp; d='M0,0, 80 100,120'&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</svg>