动画多个svg路径

Question

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

Codepen上的

This great example by Max是我想要完成的。动画单个路径对我来说很有意义，但是不同长度的多个路径怎么样（如示例中所示）。

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

为什么然后，例如，在id：结构中 680 的 stroke-dasharray 工作？

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

如果短于680，这些路径中的某些路径是否不能完全呈现？所有这些路径的长度是680吗？它们的长度看起来不一样。我错过了什么/不理解。

谢谢C

Answer 1

它的工作原理是因为没有任何路径更长而不是680.如果它们长于680，则虚线图案的实体部分将不会达到路径的整个长度。

＆＃34; 680＆＃34;的短划线模式是＆＃34; 680 680＆＃34;的快捷方式。其中描述了680个实体短划线的模式，然后是680个间隙，然后重复。

路径以680的破折号偏移开始，这意味着它们首先在破折号模式的680间隙内渲染。然后在动画中，短划线偏移量慢慢减少到0.模拟线条的绘制。

如果一条线短于680，那么所有这一切都会在动画中有一段时间，其中一些间隙是动画的，之后短划线的实体部分变得可见。这样的效果就是线越短，它就会越晚开始绘制。您可以通过XBox图像内部的线条看到这种情况。