DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!
CSS 中的 stroke-dashoffset
属性定义了 SVG 路径上 stroke
的虚线开始的位置。数字越大,虚线开始的位置在路径上越靠后。
.module {
stroke-dashoffset: 100;
}
记住
- 这**将**覆盖表示属性
<path stroke-dashoffset="100" ... />
- 这**不会**覆盖内联样式,例如
<path style="stroke-dashoffset: 100;" ... />
值
stroke-dashoffset
属性可以接受百分比或数值。
stroke-dashoffset: 100
stroke-dashoffset: 25%
请注意,不需要单位(即 em
和 px
)。没有单位的数字将以像素为单位呈现。百分比相对于当前视口的百分比。
查看 CSS-Tricks 的 CodePen 上的笔 stroke-dashoffset 属性(@css-tricks)。
stroke-dashoffset
巧妙地实现效果
使用 您是否见过那些很酷的演示,其中 SVG 形状似乎自行绘制?这是一种技巧,它结合使用 stroke-dasharray
属性来动画化元素的 stroke-dashoffset
。
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
查看 Chris Coyier 在 CodePen 上的笔 SVG 线绘制的基本示例,向后和向前(@chriscoyier)。
我们在 这篇文章 中更详细地介绍了这种技术。
相关
更多信息
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
是 | 是 | 是 | 是 | 9+ | 4.4+ | 是 |