如何在SVG中绘制箭头？

Question

我需要使它具有灵活性，可以是某些类型的线条和箭头。

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

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

我的线条是：

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

- user12700434

---

使用 marker。 - Robert Longson

请查看 https://jsfiddle.net/umxrw3sd/，箭头看起来很糟糕，如何将其移动到末尾？ - user12700434

在你的fiddle中，你需要将refX更改为较小的值：尝试5或6。这将使标记器超出svg画布范围，因此您还需要将viewBox的值更改为viewBox="0 0 110 100"以使svg变宽。 - enxaneta

谢谢。你能告诉我如何绘制箭头而不填充颜色，只有边框吗？ - user12700434

将填充设置为无色或白色，并给它描边。例如：<path d="M 0 0 L 10 5 L 0 10 z" fill="white" stroke="black" stroke-width="1"/> 但请记住，您可能需要调整 viewBox 来容纳描边的额外大小。 - Paul LeBeau

Answer 1

你可以使用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>

- mr. pc_coder