javascript - SVG SMIL animateMotion仅触发一次

我有布拉格机场的航空目的地的SVG map 。我想为通往这些机场的路径设置一个圆的动画。

拿起代码here(很抱歉，在jsfiddle上不起作用)。

负责“飞行”动画的代码如下:

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",
                "travel-fra"],
        1040: ["travel-led", "travel-led"]
    };

    var circle = function(coef, flight_id) {
        var svgns = "http://www.w3.org/2000/svg";
        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);
        shape.appendChild(motion);
        document.getElementById("airplanes").appendChild(shape);
    }
    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) {
                clearInterval(interval);
            }
        }, 50);
    }, 12000);
}

第一个动画(flights对象的第一个关键点)应按预期开始，其余动画出现在0,0(屏幕的左上角)处，并且完全不动。我不知道是什么原因造成的，因为circle()函数为每个唯一的航类定义了新的<animateMotion>元素。

更新: jsfiddle

最佳答案

这些元素的begin属性似乎设置为过去。
(在创建最后两个path_ani.end元素之前，已经触发了animateMotion)。

因为我不知道预期的行为，所以我会让您知道该怎么做
(要么找到为什么在最后两个平面之后创建平面，要么找到要插入其begin属性的正确值是什么。)

Updated fiddle ，且begin属性设置为15s