一个让 SVG 线条绘制更容易的技巧

在使用 SVG 绘制线条时，您通常会使用一个带有 <path> 元素的 stroke。 您设置一个与路径本身一样长的 stroke-dasharray，以及一个扩展到使整个描边路径最初看起来隐藏的 stroke-offset。 然后，您将 stroke-offset 重新动画到 0，以便您可以观看它“绘制”形状。

确定路径的长度是关键，幸运的是，您可以在 JavaScript 中通过选择路径并执行 pathEl.getTotalLength() 来实现。 它可能是一个奇怪的小数。 我们无法在 CSS 中获得这一点，有点可惜，但这就是生活。

这就是诀窍！

您不必测量路径的长度，因为您可以设置它。

所以你可以这样做

<path d="M66.039,133.545 ... " pathLength="1" />

这本身并没有做任何事情（据我所知）。 它不像那样只绘制路径的一部分——它仍然像您什么也没做一样绘制整个路径，只是现在路径长度的“数学”基于值为 1。

现在我们可以将 stroke-dasharray 设置为 1，并在 CSS 中为偏移量设置动画！

.path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear alternate infinite;
}

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

这有效

查看 Chris Coyier 的 CodePen 上的笔
SVG 线条绘制的基本示例，向后和向前（@chriscoyier）
在 CodePen 上。

感谢 Adam Haskell 几个月前给我发了关于此事的邮件。

---

嘿，说到 SVG 线条绘制：Lemonade 为其 2019 年慈善事业 创建了一个登陆页面，该页面使用滚动触发的 SVG 线条绘制在整个页面上下。 他们 对它进行了幕后探秘，我对此表示赞赏。