図形の線の端（先端・終端）の形状を変更
SVGで図形の線の端（先端・終端）の形状を変更するには、stroke-linecap属性を使用します。
構文
stroke-linecap="形状"属性値
属性の値は次の指定が可能です。
| 値 | 説明 | 形状例 |
|---|---|---|
| butt初期値 | パスの端と同じ位置（飛び出さない）で切り取ったような四角い形状。 |  |
| round | 線の太さの半分の長さを端から飛び出した丸い形状。 |  |
| square | 線の太さの半分の長さを端から飛び出した四角い形状。 |  |
属性の値の初期値はbuttで、属性を省略するとこの値が設定されます。
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 90" width="200" height="90">
<path d="M 10,10 190,10" fill="none" stroke="black" stroke-width="10" stroke-linecap="butt" />
<path d="M 10,40 190,40" fill="none" stroke="black" stroke-width="10" stroke-linecap="round" />
<path d="M 10,70 190,70" fill="none" stroke="black" stroke-width="10" stroke-linecap="square" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<path d="M 10,10 190,10 190,140 10,140 10,50" fill="none" stroke="black" stroke-width="10" stroke-linecap="round" />
</svg>