Import and animate svg
Import with d3.xml, appendChild to a group element, change the attributes from D3
JavaScript
var dataset = [ 5, 10, 13, 19];
//Width and height
var w = 300;
var h = 300;
//Create SVG Element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Import the plane
d3.xml("https://rebelisimus.github.io/action-roc/SVG-Samples/GR_ani06-run_Sprint.svg", "image/svg+xml", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate(" + (i * (w / dataset.length)) + ","
+ (h - 30) + ")"
+"scale("+ 0.3 +")";
})
.each(function(d, i){
var plane = this.appendChild(importedNode.cloneNode(true));
d3.select(plane).select("path").attr("fill", "blue");
})
.transition()
.duration(2000)
.attr("transform", function(d, i){
return "translate(" + (i * (w / dataset.length)) + ","
+ (h - d*4 - (w / dataset.length)) + ")"
+"scale("+ 0.3 +")";
});
});