stroke-dasharray
stroke-dasharray CSS 属性定义了在绘制 SVG 形状的描边时使用的虚线和间隙模式。如果存在，它将覆盖元素的 stroke-dasharray 属性。
此属性适用于任何 SVG 形状或文本内容元素（参见 stroke-dasharray 获取完整列表），但作为继承属性，它可以应用于诸如 <g> 等元素，并且仍然对后代元素的描边产生预期效果。
语法
/* Keywords */
stroke-dasharray: none;
/* Numeric, length, and percentage values */
stroke-dasharray: 2px, 5px;
stroke-dasharray: 20%, 50%;
stroke-dasharray: 2, 5;
/* The following two rules are equivalent */
stroke-dasharray: 2, 5, 3;
stroke-dasharray: 2, 5, 3, 2, 5, 3;
/* Global values */
stroke-dasharray: inherit;
stroke-dasharray: initial;
stroke-dasharray: revert;
stroke-dasharray: revert-layer;
stroke-dasharray: unset;
值
该值是一个由逗号和/或空格分隔的 <number>、<length> 和/或 <percentage> 值组成的列表，这些值指定交替的虚线和间隙的长度，或者关键字 none。如果给出奇数个值，则整个值将重复以设置偶数个值。
none-
描边将不绘制任何虚线。默认值。
<number>-
SVG 单位的数量，其大小由当前单位空间定义。负值无效。
<length>-
像素单位的处理方式与 SVG 单位相同（参见上文的
<number>），基于字体的长度（例如em）是根据元素的文本大小的 SVG 值计算的；其他长度单位的效果可能取决于浏览器。负值无效。 <percentage>-
百分比指的是当前 SVG 视口归一化对角线，计算方法为。负值无效。
正式定义
正式语法
stroke-dasharray =
none |
[ <length-percentage> | <number> ]+#
<length-percentage> =
<length> |
<percentage>
示例
基本虚线数组
此示例演示了使用空格分隔的 <number> 值来基本使用 stroke-dasharray 属性。
HTML
首先，我们设置一个基本的 SVG 矩形形状。为此矩形应用一个宽度为 2 的红色描边。
<svg viewBox="0 0 100 50" width="500" height="250">
<rect
x="10"
y="10"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
</svg>
CSS
我们为描边定义一个虚线模式：十个单位的虚线，然后是五个单位的间隙。这意味着虚线之间的间隙将是虚线本身长度的一半。
rect {
stroke-dasharray: 10 5;
}
结果
在描边转弯处，图案也随之延伸。在左上角，描边的起点和终点相遇处，十个单位长的起始虚线似乎与路径末尾看到的虚线图案部分连接，形成了一个看起来比十个单位更长的线条，在角落处弯曲。
虚线数组重复
此示例包含一个由逗号分隔的奇数个 <number> 值，以演示在给出奇数个值时，如何重复该值以设置偶数个值。
HTML
在这种情况下，我们定义两个矩形。
<svg viewBox="0 0 100 100" width="500" height="500">
<rect
x="10"
y="10"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
<rect
x="10"
y="60"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
</svg>
CSS
对于第一个矩形，我们定义了一个 5, 5, 1 的虚线数组，它要求五个单位的虚线，五个单位的间隙，以及一个单位的虚线。然而，由于这是一个奇数个数字，整个数字集会重复，从而创建一个与应用于第二个矩形相同的值。
rect:nth-of-type(1) {
stroke-dasharray: 5, 5, 1;
}
rect:nth-of-type(2) {
stroke-dasharray: 5, 5, 1, 5, 5, 1;
}
结果
需要偶数个数字的原因是，每个虚线数组都以虚线开头并以间隙结尾。因此，定义的模式是五单位虚线、五单位间隙、一单位虚线、五单位间隙、五单位虚线和一单位间隙。在生成的描边中，两个五单位虚线之间每次出现的一单位间隙都表示虚线数组重新开始的位置。
百分比和像素值
此示例演示了在 stroke-dasharray 属性值中使用 <percentage> 和 <length> 值。
HTML
与上一个示例一样，我们定义了两个矩形。
<svg viewBox="0 0 100 100" width="500" height="500">
<rect
x="10"
y="10"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
<rect
x="10"
y="60"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
</svg>
CSS
这次，我们不使用纯数字集合，而是使用像素单位和百分比。
rect:nth-of-type(1) {
stroke-dasharray: 5px, 5px, 1px;
}
rect:nth-of-type(2) {
stroke-dasharray: 5%, 5%, 1%;
}
结果
结果与上一个示例中的结果基本没有区别。
规范
| 规范 |
|---|
| CSS 填充与描边模块 Level 3 # stroke-dasharray |
浏览器兼容性
加载中…