SVG:矢印を描く

矢印の三角形部分を終端にくっつける

マーカーの機能を使うとやりやすいです

  <marker viewBox="0 -5 10 10" refX="5" refY="0"
    markerWidth="10" markerHeight="10" id="mk1" fill="OliveDrab">
  <polygon points="10,0 0,5 0,-5" />
</marker>


ちょっと三角形が大きすぎ。svg:viewboxってやつを調べてみよう。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" height="60" version="1.1">
<g id="surface0">
<marker viewBox="0 -5 10 10" refX="5" refY="0"
    markerWidth="10" markerHeight="10" id="triangle" fill="yellowgreen">
  <polygon points="10,0 0,5 0,-5" />
</marker>
<line x1="0" y1="30" x2="100" y2="30"
  stroke="yellowgreen"  stroke-width="5"  marker-end="url(#triangle)"/>
</g>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-51.0 -51.0 102.0 102.0" height="200" width="200">
<marker viewBox="0 -5 10 10" refX='9' refY='0'
    markerWidth="10" markerHeight="10" id='arrowhead' fill='white'  orient="auto-start-reverse">
    <polyline points='0,5 10,0 0,-5' fill="none" stroke="white" stroke-width="1" />
</marker>
<line x1="0.0" y1="0.0" x2="50.0" y2="0.0" stroke='white' stroke-width='1.0'  marker-end='url(#arrowhead)'  marker-start='url(#arrowhead)' />
</svg>
Bibliography
サポートサイト Wikidot.com arrow