Rotate external SVG file with D3.js

I'm trying to rotate an external SVG file when clicked on it with D3.js. I noticed SVG allows the rotation only on tags like <g>, <circle> and <rect>. I couldn't find a way to accomplish this.

HTML:

<div id="canvasdiv" style="border: 1px solid black; width:800px; height: 600px"></div>

Javascript:

// CREATE SVG DRAWING CANVAS
var paper = d3.select("#canvasdiv")
    .append("svg")
    .attr("id", "canvas")
    .attr("width", 800)
    .attr("height", 600);

// CREATE CONTAINER BOX FOR SVG FILE
var innerSvg = paper.append("svg")
    .attr("id", "iSvg")
    .attr("x", 500)
    .attr("y", 10)

    .on("mousedown", function() {
       d3.select(this)
       .attr("transform", "rotate(90)");
    });

//IMPORT SVG FILE
d3.xml("Boiler.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#iSvg").node().appendChild(importedNode);
});

Answers


You can add a g element to the SVG you generate and append the contents of the external SVG to that. Then you can rotate it. Any content you don't want to be rotated you can append to other g elements.


Need Your Help

Calculating difference in dates in Java

java date datetime date-arithmetic

I find it funny that Java (or the java.util library) does not have a built-in function to calculate difference in dates. I want to subtract one date from another to get the elapsed time between them.