[解決済み] SVGで矢印を描くには？

質問

フレキシブルにしたいのですが。線と線の端に矢印があるようなものでもかまいません。

そこで、線と矢じりの2つのSVGオブジェクトを作成することにしました。

線の終わりや始まりに矢じりを描くには？

私のラインは

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

解決方法は？

アップは、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>