stroke-dasharray

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

CSS 中的 stroke-dasharray 属性设置 SVG 形状笔划中的虚线长度。 更准确地说,它设置了交替虚线及其间隙的图案长度

path {
  stroke-dasharray: 5; /* dashes and gaps are both 5 units long */
}

这有点令人困惑,因为 stroke-dasharray 是一个 SVG 表示属性(例如 <path stroke-dasharray="5" ... />),它也可以用作样式表中的 CSS 属性,如下所示

因此,您需要记住

  • 覆盖 SVG 表示属性,例如 <path stroke-dasharray="5" ... />
  • 不会覆盖内联样式,例如 <path style="stroke-dasharray: 5;" ... />

在何处使用它

首先,此属性专门设计用于与 SVG 元素一起使用。 哪些元素?基本上任何 SVG 形状或文本元素

  • <altGlyph>
  • <circle>
  • <ellipse>
  • <path>
  • <line>
  • <polygon>
  • <polyline>
  • <rect>
  • <text>
  • <textPath>
  • <tref>
  • <tspan>

语法

stroke-dasharray: none | <dasharray> | inherit;
  • 初始值: none
  • 应用于: SVG 形状和文本内容元素
  • 继承:
  • 可动画化: 是(非累加)

/* Keyword values */
stroke-dasharray: none;
stroke-dasharray: inherit;

/* Length values */
stroke-dasharray: 2
stroke-dasharray: 2.5
stroke-dasharray: 2em
stroke-dasharray: 15%

/* Two-value syntax */
stroke-dasharray: 2 4
stroke-dasharray: 2 4% 5 4%
stroke-dasharray: 2em 4 6 8

值可以使用空格或逗号分隔 - 您选择!

无单位值可能是最常见的选择,因为它通常与 SVG 值一样。 它们将成为相对于 viewBox 设置的坐标系的长度单位。

模式行为

stroke-dasharray 的令人费解之处在于它仅仅是一组长度值,但它同时设置了虚线的长度和它们之间的间隙。

如果我们设置一个值,则虚线长度和间隙长度都采用该值并重复该模式。

但是,如果我们设置两个值,则第一个设置虚线,第二个设置间隙。

如果我们设置三个值

  • 第一个值设置第一个虚线
  • 第二个值设置第一个间隙
  • 第三个设置第二个虚线

注意那里有什么有趣的事情吗? 您可能认为该模式只是重复。 实际发生的是,该模式不断循环遍历这些值,无论它们是应用于虚线还是间隙。 因此,我们在最后一个示例中看到的是

  • 虚线:5
  • 间隙:10
  • 虚线:15
  • 间隙:5
  • 虚线:10
  • 间隙:15
  • …等等。

换句话说

stroke-dasharray: 5 10 15

/* is equivalent to this */
stroke-dasharray: 5 10 15 5 10 15

这样,即使我们提供奇数个值,我们也能获得一个很好的均匀模式。

stroke-dasharray: 5;             /* 5 5 */
stroke-dasharray: 5 10 15;       /* 5 10 15 5 10 15 */
stroke-dasharray: 5 10 15 20 25; /* 5 10 15 20 25 5 10 5 20 25 */

使用 stroke-dasharray 玩把戏

您是否曾经见过那些酷炫的演示,其中 SVG 形状似乎自己绘制? 这是一个技巧,它利用了元素的 stroke-dasharray 并结合 stroke-dashoffset 属性对其进行动画处理。

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

我们在这篇文章中更详细地介绍了这种技术。 它看起来像 IE 11 及更低版本不喜欢使用 @keyframes 为笔划属性设置动画,因此要小心。

浏览器支持

更多信息