stroke-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
stroke-width は CSS のプロパティで、SVG 図形に適用されるストロークの幅を定義します。もし存在するならば、要素の stroke-width この属性を上書きします。
このプロパティは、あらゆる SVG 図形またはテキストコンテンツ要素（完全な一覧は stroke-width を参照）に適用されますが、継承プロパティであるため、<g> などの要素に適用された場合、子孫要素のストロークにも意図した効果が及びます。値がゼロと評価された場合は、ストロークは描画されません。
構文
/* 長さとパーセント値 */
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 ビューポートの正規化された対角線からの相対値で、これは で計算されます。
<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> | <number> ]#
<length-percentage> =
<length> |
<percentage>
例
様々なストローク幅
この例は、stroke-width プロパティの様々な値の構文を示しています。
HTML
5 つの複数区間のパスを設定しました。いずれも太さ 1 の黒のストロークを使用し、塗りつぶしはありません。各パスは左側（浅い角の角度）から右側（極端な角の角度）へと、一連の山を象徴する記号を描画します。
<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% に設定します。
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%;
}
結果
仕様書
| Specification |
|---|
| CSS Fill and Stroke Module Level 3 # stroke-width |
ブラウザーの互換性
Loading…