如何在 SVG 中绘制箭头？答案

【问题标题】：How to draw an arrow in SVG?如何在 SVG 中绘制箭头？
【发布时间】：2020-03-17 07:08:22
【问题描述】：

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

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

如何在行尾或行首画箭头？

我的台词是：

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

【问题讨论】：

使用marker
可以改变箭头的方向吗？你能分享一个样本吗？
行没有标记开始
访问链接以获取示例，并且行 does 具有标记开始。
在您的小提琴中，您需要将 refX 更改为较小的值：尝试 5 或 6。这将使标记超出 svg 画布，因此您还需要更改viewBox 的值为viewBox="0 0 110 100" 以使svg 更宽

标签： html svg

【解决方案1】：

upu 可以使用 defs 和 path http://jsfiddle.net/jxtfeqag/

<svg >
    <defs>
      <marker id='head' orient="auto"
        markerWidth='3' markerHeight='4'
        refX='0.1' refY='2'>
        <path d='M0,0 V4 L2,2 Z' fill="black"/>
      </marker>
    </defs>

    <path
      id='arrow-line'
      marker-end='url(#head)'
      stroke-width='4'
      fill='none' stroke='black'  
      d='M0,0, 80 100,120'
      />

    </svg>

【讨论】：