stroke-dasharray

**stroke-dasharray** CSS 属性定义了用于绘制 SVG 形状的描边中虚线和间隙的图案。如果存在，它将覆盖元素的 stroke-dasharray 属性。

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

语法

css
/* 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 视窗的归一化对角线，它计算为 <width> 2 + <height> 2 2 . 负值无效。

正式定义

在数据库中找不到值！

正式语法

stroke-dasharray = 
  none                                  |
  [ <length-percentage> | <number> ]+#  

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

示例

基本虚线阵列

此示例演示了使用空格分隔的 <number> 值的基本 stroke-dasharray 属性用法。

HTML

首先，我们设置一个基本的 SVG 矩形形状。在此矩形上，应用了宽度为 2 的红色描边。

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

我们为描边定义了虚线图案：十个单位的虚线，然后是五个单位的空格。这意味着虚线之间的间隙将是虚线本身长度的一半。

css
rect {
  stroke-dasharray: 10 5;
}

结果

描边拐角处，图案会延续。在左上角，描边的起点和终点相遇，十个单位长的起始虚线似乎与路径末尾看到的虚线图案部分相连，形成了看起来比十个单位更长的线，弯曲在拐角处。

虚线阵列重复

此示例包含奇数个逗号分隔的 <number> 值，以演示如果给出奇数个值，则该值将如何重复以设置偶数个值。

HTML

在本例中，我们定义了两个矩形。

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 的虚线阵列，它要求五个单位的虚线，五个单位的空格，以及一个单位的虚线。但是，由于这是一个奇数，因此整个数字集将被重复，从而创建了一个与应用于第二个矩形的值相同的值。

css
rect:nth-of-type(1) {
  stroke-dasharray: 5, 5, 1;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5, 5, 1, 5, 5, 1;
}

结果

需要偶数个数字的原因是，这样每个破折号数组都以破折号开头，以间隙结尾。因此，定义的模式是：五单位破折号，五单位间隙，一单位破折号，五单位间隙，五单位破折号，一单位间隙。在生成的笔划中，两个五单位破折号之间每出现一个一单位间隙，都表示破折号数组从该位置开始重复。

百分比和像素值

此示例演示了在 <percentage> 和 <length> 值中使用 stroke-dasharray 属性值。

HTML

与前面的示例一样，我们定义了两个矩形。

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

这次，我们使用像素单位和百分比，而不是一组裸数字。

css
rect:nth-of-type(1) {
  stroke-dasharray: 5px, 5px, 1px;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5%, 5%, 1%;
}

结果

结果与前一个示例中的结果基本相同。

规范

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

浏览器兼容性

BCD 表格只能在浏览器中加载

另请参阅