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

The Position of tables in hibernate

java mysql hibernate

How can we configure hibernate annotations in the Entity class so that columns are created in a specific order.

Sending mail via php and from headers?

php email

When I send mail from my php script I send it like so

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.