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",
"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);
}
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
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
source to share