javascript - SVG SMIL animateMotion 只触发一次

Question

我有一张布拉格机场航类目的地的 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

Answer 1

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

因为我不知道预期的行为，我会让你弄清楚该怎么做
(要么找到最后两个平面创建的原因，要么找到插入它们的 begin 属性的正确值。)

Updated fiddle begin 属性设置为 15s