CODEWITHSUNDEEP
javascriptanimationsvgpath
Franky
Franky

Reputation: 97

Multiple animations on SVG path

I've made a SVG path for elements to move around on. I'd like to add elements to this path with an interval, so you get a line of moving elements.

The problem is that when I add an element to it, it spawns on top of the first element. They stack on top of each other, instead of moving behind each other. See this fiddle:

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

If you check your console you'll see a new element is added every second:

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

But they stack on top of each other. How do I get them to follow the path from the start, independent of other elements?

Upvotes: 0

Views: 800

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

SVG animations work on a global time clock. begin="0s" means the start of the very first animation. No matter when you add that element to the SVG.

In other words, <animate begin="0s"> means "begin playing this animation as if it actually began at time=0". Even if you start it at time="10s". If you add an animation ten seconds after the first one, it will skip the first 10 seconds of its animation and actually begin with the state it would be at time=10s.

So if you want the second animation to start one second after the first one, you need to make it begin="1s".

Upvotes: 2

Related Questions