SVG SMIL animateMotion runs only once

I have an SVG map for air travel for Prague airport. I would like to animate the circle along the way to each of these airports.

Take the code here (sorry for that, doesn't work on jsfiddle).

The code that performs the flight animation looks like this:

function animate() {
    var flights = {
        100: ["travel-svo", "travel-svo"],
        600: ["travel-fra", "travel-fra", "travel-fra", "travel-fra", "travel-fra",
                 "travel-fra", "travel-fra", "travel-nap"],
        620: ["travel-ams", "travel-ams"],
        700: ["travel-lhr", "travel-lhr", "travel-lhr", "travel-lhr", "travel-lhr"],
        710: ["travel-cdg", "travel-cdg", "travel-cdg", "travel-cdg", "travel-cdg"],
        805: ["travel-gva"],
        810: ["travel-vie", "travel-vie", "travel-vie", "travel-vie"],
        850: ["travel-ams", "travel-ams", "travel-ams"],
        855: ["travel-svo"],
        930: ["travel-beg", "travel-beg"],
        935: ["travel-muc", "travel-muc", "travel-muc"],
        945: ["travel-sof", "travel-sof"],
        950: ["travel-fco"],
        955: ["travel-cdg", "travel-cdg", "travel-cdg", "travel-cdg", "travel-cdg",
                 "travel-cdg", "travel-cdg"],
        1010: ["travel-mad", "travel-mad", "travel-mad", "travel-mad", "travel-mad"],
        1015: ["travel-svo", "travel-svo"],
        1025: ["travel-zrh"],
        1030: ["travel-dxb", "travel-dxb", "travel-arn"],
        1035: ["travel-fra", "travel-fra", "travel-fra", "travel-fra", "travel-fra",
        1040: ["travel-led", "travel-led"]

    var circle = function(coef, flight_id) {
        var svgns = "";
        var svgDocument =document;
        var motion = svgDocument.createElementNS(svgns,"animateMotion");
        var shape  = svgDocument.createElementNS(svgns, "circle");

        motion.setAttribute("begin", "path_ani.end");
        motion.setAttribute("dur", "10s");
        motion.setAttribute("path", document.getElementById(flight_id).getAttributeNS(null, "d"));
        motion.setAttribute("xlink:href", "#" + flight_id);

        shape.setAttributeNS(null, "r",  1*coef);
        shape.setAttributeNS(null, "fill", "1f78b4");
        shape.setAttributeNS(null, "stroke", "1f78b4");
        shape.setAttribute("id", "airplane-" + flight_id);
    setTimeout(function() {
        var time = 100;

        var interval = setInterval(function() {
            var f = flights[time];
            var counts = {};

            if (f) {
                // count unique items
                for(var i = 0; i < f.length; i += 1) {
                    var num = f[i];
                    counts[num] = counts[num] ? counts[num]+1 : 1;

                for (var flight in counts) {
                    circle(counts[flight], flight);
            time += 5;
            // stop
            if (time > 1040) {
        }, 50);
    }, 12000);


The first animation (the first key of the object flights

) starts as it should, while the rest render at 0,0 (top left corner of the screen) and don't move at all. I don't know what might be causing this, as the function circle()

defines a new element <animateMotion>

for each unique flight.

UPDATE: jsfiddle


source to share

1 answer

It seems that your attribute begin

for these elements is set to the past.
( path_ani.end

already fired before the last two elements are created animateMotion


As I don't know the expected behavior, I'll let you know what to do (Or find the reason for the last two planes being created or the correct value to insert into their attributes begin


Updated script with attributesbegin

set to15s



All Articles