SVG路径上的多个动画答案

【问题标题】：Multiple animations on SVG pathSVG路径上的多个动画
【发布时间】：2019-01-10 04:18:48
【问题描述】：

我为元素移动创建了一个 SVG 路径。我想以一定的间隔向这条路径添加元素，这样你就会得到一行移动的元素。

问题是当我向它添加一个元素时，它会在第一个元素之上生成。它们相互堆叠，而不是相互移动。看到这个小提琴：

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

<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>

但它们相互堆叠。我如何让他们从一开始就遵循路径，独立于其他元素？

【问题讨论】：

标签： javascript animation svg path

【解决方案1】：

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

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

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

【讨论】：