stroke-width

Baseline 已廣泛支援

此功能已經成熟，並可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 3 月⁩起，它已在各瀏覽器中推出。

stroke-width 屬性是一個表示屬性，用於定義將應用於形狀描邊的寬度。它適用於任何 SVG 形狀或文字內容元素，但作為一個繼承屬性，它也可以應用於 <g> 等元素，並對後代元素的描邊產生預期效果。

注意： 作為一個表示屬性，stroke-width 還有一個 CSS 屬性對應項：stroke-width。當兩者都被指定時，CSS 屬性具有更高的優先順序。

你可以將此屬性與以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

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 對角線長度的百分比。

規範

規範
Scalable Vector Graphics (SVG) 2 # StrokeWidth

瀏覽器相容性

另見

CSS stroke-width 屬性

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ⁨2025年4月16日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤