CSS | stroke-dasharray 属性

在 SVG （可缩放矢量图形）中使用 stroke-dasharray 属性可以实现绘制虚线或长短相间的实线。这个属性定义了绘制样式的线条段的长度和间隔。

语法

stroke-dasharray: <length> | <percentage> | none | inherit;

属性值

• <length>：表示虚线段的长度。多个值用逗号分隔。如 stroke-dasharray: 5 表示虚线长度为 5。
• <percentage>：表示除以轮廓宽度得到的虚线段的长度。多个值用逗号分隔。如 stroke-dasharray: 50% 表示虚线长度为轮廓宽度的一半。
• none：表示不绘制虚线，采用实线。
• inherit：表示从父元素继承属性值。

示例

绘制虚线

line {
  stroke-dasharray: 5, 5; /* 绘制虚线，线长 5， 间隔 5 */
}

绘制间隔长短相间的实线

line {
  stroke-dasharray: 20, 5; /* 绘制间隔长短相间的实线，长线 20，短线 5 */
}

更改间隔

使用与 <length> 相同的值来更改间隔长度。

line {
  stroke-dasharray: 20, 10; /* 绘制间隔长短相间的实线，长线 20，间隔 10 */
}

取消虚线

设置 none 取消虚线。

line {
  stroke-dasharray: none; /* 取消虚线，绘制实线 */
}

继承父元素属性

.parent {
  stroke-dasharray: 10, 5;
}

.child {
  stroke-dasharray: inherit; /* 继承父元素虚线属性，等效于 stroke-dasharray: 10, 5; */
}

总结

stroke-dasharray 属性可用于实现 SVG 线条的虚线效果和间隔长短相间的实线效果。通过设置不同的长度或百分比，可以轻松调整线条的虚线效果和间隔长度。同时，使用继承属性可以更好地管理我们的代码，减少代码量。