SVG路径上的多个动画

Question

我为元素创建了一个SVG路径，让它们在上面移动。我想在这个路径中添加一个间隔元素，这样就可以得到一行移动元素。

问题是，当我向其中添加一个元素时，它会在第一个元素的顶部生成。它们叠在一起，而不是一个接一个地移动。看看这个小提琴：

https://jsfiddle.net/rct8m763/7/

如果你检查你的控制台，你会看到每秒都会添加一个新元素：

<svg id="svg-box" width="2100" height="1080">
<image xlink:href="img/trash/11.png" width="125" height="125" class="draggable">
<animateMotion path="M 450 150 L 1400 150 A 50 50 0 1 1 1400 950 L 450 950 A 50 50 0 1 1 450 150" begin="0s" dur="20s" repeatCount="indefinite" rotate="auto"></animateMotion>
</image>
<image xlink:href="img/trash/11.png" width="125" height="125" class="draggable">
<animateMotion path="M 450 150 L 1400 150 A 50 50 0 1 1 1400 950 L 450 950 A 50 50 0 1 1 450 150" begin="0s" dur="20s" repeatCount="indefinite" rotate="auto"></animateMotion>
</image>
<image xlink:href="img/trash/11.png" width="125" height="125" class="draggable">
<animateMotion path="M 450 150 L 1400 150 A 50 50 0 1 1 1400 950 L 450 950 A 50 50 0 1 1 450 150" begin="0s" dur="20s" repeatCount="indefinite" rotate="auto"></animateMotion>
</image>
<image xlink:href="img/trash/11.png" width="125" height="125" class="draggable">
<animateMotion path="M 450 150 L 1400 150 A 50 50 0 1 1 1400 950 L 450 950 A 50 50 0 1 1 450 150" begin="0s" dur="20s" repeatCount="indefinite" rotate="auto"></animateMotion>
</image>

但它们叠在一起。我如何让他们从一开始就遵循这条道路，独立于其他元素？

Answer 1

SVG动画在全球时钟上工作。begin="0s"表示第一个动画的开始。无论何时将该元素添加到SVG中。

换句话说，<animate begin="0s">的意思是"开始播放此动画，就好像它实际上是在时间=0开始一样"。即使您在时间="10s"开始。如果在第一个动画后10秒添加动画，它将跳过动画的前10秒，并实际从时间=10s时的状态开始。

因此，如果希望第二个动画在第一个动画后一秒开始，则需要将其设置为begin="1s"。