如何在SVG中绘制箭头？

Question

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

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

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

我的路线是：

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

Answer 1

您可以使用defs\ pathxe2\x80\x94 http://jsfiddle.net/jxtfeqag/

\n

\r\n

\r\n

<svg>\n  <defs>\n    <marker \n      id=\'head\' \n      orient="auto" \n      markerWidth=\'3\' \n      markerHeight=\'4\' \n      refX=\'0.1\' \n      refY=\'2\'\n    >\n      <path d=\'M0,0 V4 L2,2 Z\' fill="black" />\n    </marker>\n  </defs>\n\n  <path\n    id=\'arrow-line\'\n    marker-end=\'url(#head)\'\n    stroke-width=\'4\'\n    fill=\'none\' stroke=\'black\'  \n    d=\'M0,0, 80 100,120\'\n  />\n        \n</svg>

\r\n

\r\n

\r\n

\n