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 为笔划属性设置动画,因此要小心。