CSS | stroke-width 属性

简介

在SVG图像中，stroke-width 属性用于设置形状轮廓的宽度。这个属性只能应用于具有描边的元素，如线段、路径、矩形等。

语法:

selector {
  stroke-width: value;
}

• stroke-width：指定轮廓的宽度。

值

• auto：根据用户代理或上下文确定轮廓宽度。
• <length>：指定固定的轮廓宽度，可以使用像素(px)、百分比(%)等单位。
• inherit：继承父元素的轮廓宽度。

示例

使用固定宽度

rect {
  stroke-width: 2px;
}

line {
  stroke-width: 3px;
}

path {
  stroke-width: 1.5px;
}

使用百分比宽度

circle {
  stroke-width: 10%;
}

ellipse {
  stroke-width: 20%;
}

继承外部样式

.parent {
  stroke-width: 3px;
}

.child {
  stroke-width: inherit;
}

注意事项

• stroke-width 属性只适用于具有轮廓的元素，不会影响没有轮廓的元素。
• 如果设置了stroke-width，并且轮廓颜色没有定义或者设为透明，那么轮廓将不会显示出来。
• 根据设备的分辨率或放大缩小程度，stroke-width 的实际显示宽度可能会有所变化。

以上是 CSS 中 stroke-width 属性的介绍。根据需要，你可以使用固定宽度、百分比宽度或继承外部样式的方式来设置轮廓的宽度。对于使用SVG图像的前端开发者来说，了解并正确使用 stroke-width 属性是非常重要的。