stroke-width

基线广泛可用

自 2020年3月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

stroke-width 表现属性定义了应用于图形的外轮廓的宽度。

你可以将此属性与以下 SVG 元素一起使用：

本文内容

示例

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

html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- 默认外轮廓宽度为 1 -->
  <circle cx="5" cy="5" r="3" stroke="green" />

  <!-- 使用数值设置外轮廓宽度 -->
  <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />

  <!-- 使用百分数设置外轮廓宽度 -->
  <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
</svg>

使用说明

值默认值动画性

<length> | <percentage>

1px

是

备注：百分数值始终以标准化 viewBox 的对角线长度的百分比计算。

规范

Scalable Vector Graphics (SVG) 2
# StrokeWidth

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年4月21日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题