図形の線の端(先端・終端)の形状を変更

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>

SVG逆引きリファレンス一覧へ戻る