CODEWITHSUNDEEP
javascriptsvgd3.jsrotation
user2717511
user2717511

Reputation: 215

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);
});

Upvotes: 1

Views: 1392

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109272

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.

Upvotes: 1

Related Questions