Question

我有一张布拉格机场的航班目的地SVG地图。我想沿着通往这些机场的路径制作一个圆圈。

抓住代码here（对不起，不对jsfiddle工作）。

照顾＆＃34;航班的代码＆＃34;动画看起来如下：

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

SVG SMIL animateMotion仅触发一次

1 个答案: