css - 设置多个svg路径的动画

我正在尝试学习对SVG路径进行动画处理的细节，并且有一个使我感到困惑的问题。

我试图完成的Codepen上的This great example by Max。对单个路径进行动画处理对我来说很有意义，但对于长度不同的多个路径又如何呢（如示例中所示）。

每个笔画长度是不同的吗？

例如，为什么为什么在id：结构内的680的笔划-破折号起作用？

&#structure {
      stroke: #999;
      stroke-dasharray: 680;
      stroke-dashoffset: 680;
      animation-duration: 3s;
      animation-delay: 2s;
    }

如果这些路径的长度小于680，这些路径是否应该不能完全渲染？所有这些路径的长度都为680吗？它们看起来不一样长。我缺少/不了解的内容。

谢谢C

最佳答案

之所以起作用，是因为没有一条路径的长度大于680。如果它们的长度大于680，则虚线图案的实心部分将无法达到路径的全长。

点划线“ 680”是“ 680 680”的快捷方式。依次画出680实线和680间隙的图案，然后重复。

路径以680的虚线偏移开始，这意味着它们首先在虚线图案的680间隙内渲染。然后在动画中，破折号偏移量逐渐减小为0。模拟线条绘制。

如果一条线短于680，则将发生的一切是在动画中会有一定的时间段，其中一些间隙会被动画化，然后才能看到虚线的实心部分。这样做的效果是，线越短，则开始绘制的时间就越晚。您可以通过XBox图像内部的线条看到这种情况。

关于css - 设置多个svg路径的动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35662622/