如何在SVG中绘制箭头？

Question

我需要让它变得灵活。它可以是某种类型的线条和线条末端的箭头。因此，我决定创建两个 SVG 对象：线条和箭头。如何在线的末尾或开头绘制箭头？我的路线是：<svg width="500" height="100">  <line x1="0" y1="80" x2="100" y2="20" stroke="black" /></svg>

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>