stroke-width

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年4月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

stroke-width は CSS のプロパティで、SVG 図形に適用されるストロークの幅を定義します。もし存在するならば、要素の stroke-width この属性を上書きします。

このプロパティは、あらゆる SVG 図形またはテキストコンテンツ要素(完全な一覧は stroke-width を参照)に適用されますが、継承プロパティであるため、<g> などの要素に適用された場合、子孫要素のストロークにも意図した効果が及びます。値がゼロと評価された場合は、ストロークは描画されません。

構文

css

/* 長さとパーセント値 */
stroke-width: 0%;
stroke-width: 1.414px;
/* グローバル値 */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;

値

<length>: ピクセル単位は SVG 単位と同様に扱われます(上記の <number> 参照)。em などのフォントベースの長さは、要素のテキストサイズに対する SVG 値を基準に計算されます。その他の長さの単位の効果はブラウザーによって異なる場合があります。
<percentage>: パーセント値は、現在の SVG ビューポートの正規化された対角線からの相対値で、これは $\frac{\sqrt{{<width>}^{2} + {<height>}^{2}}}{\sqrt{2}}$ で計算されます。
<number>: 現在の単位空間によってサイズが定義する複数の SVG 単位です。

公式定義

初期値	`1px`
適用対象	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
継承	あり
パーセント値	refer to the normalized diagonal measure of the current SVG viewport's applied `viewBox`, or of the viewport itself if no `viewBox` is specified
計算値	an absolute `<length>` or `<percentage>`, numbers converted to absolute lengths first
アニメーションの種類	計算値の型による

形式文法

stroke-width = 
 [ <length-percentage> | <line-width> | <number> ] # 

<length-percentage> = 
 <length> | 
 <percentage> 

<line-width> = 
 <length [0,∞]> | 
 hairline | 
 thin | 
 medium | 
 thick

例

様々なストローク幅

この例は、stroke-width プロパティの様々な値の構文を示しています。

HTML

5 つの複数区間のパスを設定しました。いずれも太さ 1 の黒のストロークを使用し、塗りつぶしはありません。各パスは左側(浅い角の角度)から右側(極端な角の角度)へと、一連の山を象徴する記号を描画します。

html

<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
 <g stroke="black" stroke-width="1" fill="none">
 <path
 d="M1,5 l7 ,-3 l7 ,3
 m2,0 l3.5 ,-3 l3.5 ,3
 m2,0 l2 ,-3 l2 ,3
 m2,0 l0.75,-3 l0.75,3
 m2,0 l0.5 ,-3 l0.5 ,3" />
 <path
 d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
 <path
 d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
 <path
 d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
 <path
 d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
 </g>
</svg>

CSS

最初の 4 つのパスには、ストローク幅の値をペアで適用し、数値のみとピクセル値が機能的に同等であることを示してします。まず2つのパスでは、値は .25 と .25px です。2 つ目以降の 2 つのパスでは、値は 1 と 1px です。

5 番目かつ最後のパスには、5% の値が適用されます。これにより、ストロークの幅を SVG ビューポートの対角線の長さの 5% に設定します。

css

path:nth-child(1) {
 stroke-width: 0.25;
}
path:nth-child(2) {
 stroke-width: 0.25px;
}
path:nth-child(3) {
 stroke-width: 1;
}
path:nth-child(4) {
 stroke-width: 1px;
}
path:nth-child(5) {
 stroke-width: 5%;
}

結果

[フレーム]

仕様書

仕様書
CSS Fill and Stroke Module Level 3 # stroke-width

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年11月1日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告