Question

我为元素移动提供了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>

但是它们彼此堆叠。我如何让他们从一开始就走独立于其他要素的道路？

Answer 1

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

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

因此，如果要让第二个动画在第一个动画之后一秒钟开始播放，则需要使其begin="1s"。

SVG路径上的多个动画

1 个答案: