stroke-width

**stroke-width** CSS 属性定义应用于 SVG 形状的描边的宽度。如果存在，它将覆盖元素的 stroke-width 属性。

此属性适用于任何 SVG 形状或文本内容元素（有关完整列表，请参阅 stroke-width），但作为继承属性，它可以应用于诸如 <g> 之类的元素，并且仍然对后代元素的描边产生预期的效果。如果该值计算为零，则不绘制描边。

语法

css
/* Length and percentage values */
stroke-width: 0%;
stroke-width: 1.414px;

/* Global values */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;

值

<length>

像素单位与 SVG 单位的处理方式相同（请参阅上面的 <number>），基于字体的长度（如 em）是根据元素的 SVG 文本大小值计算的；其他长度单位的效果可能取决于浏览器。

<percentage>

百分比指的是当前 SVG 视口的归一化对角线，计算公式如下： <width> 2 + <height> 2 2 .

<number>

许多 SVG 单位，其大小由当前单位空间定义。

正式定义

数据库中未找到该值！

正式语法

stroke-width = 
  [ <length-percentage> | <number> ]#  

<length-percentage> = 
  <length>      |
  <percentage>

示例

各种描边宽度

此示例演示了 stroke-width 属性的各种值语法。

HTML

首先，我们设置了五个多段路径，所有路径都使用宽度为 1 的黑色描边，并且没有填充。每个路径都创建一系列山脉符号，从左（浅角）到右（极端角）。

html
<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

对于前四个路径，我们以对的形式应用描边宽度值，以显示裸数字值和像素值在功能上是等效的。对于前两个路径，值分别为 .25 和 .25px。对于后两个路径，值分别为 1 和 1px。

对于第五个也是最后一个路径，应用了 5% 的值，从而设置了描边宽度，该宽度是 SVG 视口对角线长度的 5%。

css
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%;
}

结果

规范

规范
CSS Fill and Stroke 模块级别 3
# stroke-width

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅