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 January 2020.
stroke-width
属性は、図形に適用するストロークの幅を定義するプレゼンテーション属性です。
この属性は以下の SVG 要素で使用することができます。
例
html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<!-- Default stroke width: 1 -->
<circle cx="5" cy="5" r="3" stroke="green" />
<!-- Stroke width as a number -->
<circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />
<!-- Stroke width as a percentage -->
<circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
</svg>
使用上のメモ
値 | <length> | <percentage> |
---|---|
既定値 | 1px |
アニメーション | 可 |
メモ:
パーセント値は常に、正規化された viewBox
の対角線の長さに対するパーセント値として計算されます。
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StrokeWidth |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
stroke-width |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.