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 视口归一化对角线，计算方法为.
<number>非标准-
SVG 单位的数值，其大小由当前单位空间定义。
正式定义
正式语法
stroke-width =
[ <length-percentage> | <number> ]#
<length-percentage> =
<length> |
<percentage>
示例
各种描边宽度
此示例演示了 stroke-width 属性的各种值语法。
HTML
首先，我们设置了五条多段路径，所有路径都使用宽度为一的黑色描边，并且没有填充。每条路径都创建了一系列山形符号，从左（浅角）到右（极角）。
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 视口对角线长度的百分之五。
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 填充与描边模块 Level 3 # stroke-width |
浏览器兼容性
加载中…