線の端点と接続点の形状を指定する属性があります。線の端の処理をどのようにするのかを指定できます。合わせて破線の指定の仕方を見ていきます。線の細部の扱いまで細かく指定できます。小さいことかもしれませんが、見た目の印象が変わります。
端点の形状:stroke-linecap
<symbol id="hline" stroke-width="10" stroke="deepskyblue"> <line x1="20" y1="15" x2="80" y2="15"/> </symbol> <g stroke-width="0.1" stroke="darkorange"> <line x1="20" y1="5" x2="20" y2="65"/> <line x1="80" y1="5" x2="80" y2="65"/> </g> <use href="#hline" stroke-linecap="butt"/> <use href="#hline" y="20" stroke-linecap="round"/> <use href="#hline" y="40" stroke-linecap="square"/> <g font-size="6" font-family="serif" text-anchor="middle" fill="white"> <text x="50" y="17">butt</text> <text x="50" y="37">round</text> <text x="50" y="57">square</text> </g>
- butt:端点の位置で切られた形
- round:半円の形
- square:端点の位置からはみ出した形
接続点の形状:stroke-linejoin
<symbol id="corner" stroke-width="8" stroke="greenyellow" fill="none"> <polyline points="5,60 30,20 55,60"/> </symbol> <use href="#corner" stroke-linejoin="miter"/> <use href="#corner" x="20" stroke-linejoin="round"/> <use href="#corner" x="40" stroke-linejoin="bevel"/> <g font-size="6" font-family="serif" text-anchor="middle" fill="steelblue"> <text x="30" y="10">miter</text> <text x="50" y="10">round</text> <text x="70" y="10">bevel</text> </g>
- miter:尖った形
- round:丸い形
- bevel:角を削った形
破線:stroke-dasharray
SVGでは、stroke-dasharrayという属性に、破線のパターンをあらわす記述を設定することによって、指定されたパターンで破線を描画することができるようになっている。破線のパターンは、線の長さと間隔の長さを、コンマで区切って並べたもの。
<symbol id="stroke" stroke-width="5" stroke="midnightblue" fill="none"> <line x1="10" y1="15" x2="90" y2="15"/> </symbol> <use href="#stroke" stroke-dasharray="2"/> <use href="#stroke" y="14" stroke-dasharray="2, 5"/> <use href="#stroke" y="28" stroke-dasharray="2, 5, 8"/> <use href="#stroke" y="42" stroke-dasharray="2, 5, 8, 3"/> <g font-size="6" font-family="serif" fill="coral"> <text x="10" y="11">2</text> <text x="10" y="25">2, 5</text> <text x="10" y="39">2, 5, 8</text> <text x="10" y="53">2, 5, 8, 3</text> </g>
まとめ
- 端点の形状:stroke-linecap
- 接続点の形状:stroke-linejoin
- 破線:stroke-dasharray
