How to draw an arrow in 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

You 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>