一种流行的 SVG 动画技巧是路径绘制。如果你不能想象它，这里有一个 我创建的无数示例集合。本质上，SVG 形状周围的描边会随着时间的推移自行绘制。
我第一次从 Jake Archibald 的文章 SVG 中的动画线段绘制 了解到它，这篇文章对它的解释非常清晰。当然，我也尝试过自己的解释，我们在这个视频中会详细讲解。
我认为从 CSS 开始，了解如何将破折号属性应用于 SVG 形状是最容易的。它们是如何变得更长，甚至变得足够长以覆盖（或不覆盖）整个形状。然后当它们足够长时，对它们进行偏移就是绘制工作原理。
然后，一旦你理解了这一点，就理解 JavaScript 可以帮助计算所需破折号的长度和偏移量，并将其完美地执行。