stroke-dashoffset

Avatar of Geoff Graham
Geoff Graham

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%

请注意,不需要单位(即 empx)。没有单位的数字将以像素为单位呈现。百分比相对于当前视口的百分比。

查看 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+