动画多个 svg 路径

Question

我正在尝试了解动画 SVG 路径的细节，但有一个问题让我感到困惑。

This great example by Max 在 Codepen 上是我想要完成的。动画一条路径对我来说很有意义，但是不同长度的多条路径呢（如示例中所示）。

每个笔画长度都不一样吗？

例如，为什么 stroke-dasharray 在 id: structure 中的 680 有效？

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

如果这些路径中的某些路径短于 680，它们不应该不会完全渲染吗？所有这些路径的长度都是 680 吗？它们看起来不一样的长度。我错过了什么/不明白什么。

谢谢C

Answer 1

之所以有效，是因为所有路径长度都不超过 680。如果它们超过 680，则虚线图案的实心部分不会达到路径的全长。

“680”的破折号模式是“680 680”的快捷方式。其中描述了 680 实线破折号跟随 680 间隙，然后重复的模式。

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

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