stroke-width

CSS 中的 stroke-width 属性用于设置 SVG 形状边框的宽度。

.module {
  stroke-width: 2;
}

记住

• 这 将 覆盖演示属性 <path stroke-width="2" ... />
• 这 不会 覆盖内联样式，例如 <path style="stroke-width: 2;" ... />

值

stroke-width 属性可以接受任何数字，包括整数、小数和百分比

• stroke-width: 2px
• stroke-width: 2em
• stroke-width: 2
• stroke-width: 2.5
• stroke-width: 15%

请注意，不需要单位标识符（例如 px 和 em）。没有单位的数字是基于 SVG viewBox 坐标系的。因此，例如，在设置为 0 0 100 100 的 viewBox 中，5 与 5% 相同（5/100 = .05 或 5%），但在设置为 0 0 50 50 的 viewBox 中，5 等于 10%（5/50 = .1 或 10%）。

查看 CodePen 上的 CSS-Tricks (@css-tricks) 的笔触 stroke-width 属性。

相关

• stroke
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap

更多信息

• SVG 1.1 规范
• MDN 关于填充和笔触

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
是	是	是	是	9+	4.4+	是