SVGで直線を引く

svg-line.png

線(line)の基本

<line x1="55" y1="30" x2="190" y2="30" stroke="black" marker-end="url(#mk1)" />

x1
始点x
y1
始点y
x2
終点x
y2
終点y
stroke
線の色
marker-end
終点のスタイル(ここが矢印のポイント)

<?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">
<line x1="0" y1="30" x2="100" y2="30"
  stroke="yellowgreen"  stroke-width="5"/>
</g>
</svg>

サポートサイト Wikidot.com