図形の線の太さ(幅)を変更

SVGで図形の線の太さ(幅)を変更するには、stroke-width属性を使用します。
CSSのstroke-widthプロパティとしても使用することができます。

線はパスにそって引かれ、通常はパスの中央から外側に向かって太さが適用されます。

太さが4の場合:
水平線のパスを中央とし上下にそれぞれ2pxずつ線ができる

構文

XML属性

stroke-width="太さ"

CSSプロパティ

stroke-width:太さ;

値は0以上の数字で指定します。

サンプルコードとデモ

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
	<line x1="10" y1="10" x2="190" y2="10" fill="none" stroke="black" />
	<line x1="10" y1="30" x2="190" y2="30" fill="none" stroke="black" stroke-width="3" />
	<line x1="10" y1="50" x2="190" y2="50" fill="none" stroke="black" stroke-width="5" />
	<line x1="10" y1="70" x2="190" y2="70" fill="none" stroke="black" stroke-width="10" />
</svg>

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