如何在SVG中绘制箭头？

Question

I need to make it flexible. It can be some type of lines and arrows on the end of lines.

So, I decided to create two SVG objects: lines and an arrowhead.

How to draw an arrowhead on the end or beginning of the line?

My line is:

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

Answer 1

Upu can use defs and 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>