Поверните внешний SVG-файл с помощью D3.js

Я пытаюсь повернуть внешний SVG-файл при нажатии на него с помощью D3.js. Я заметил, что SVG позволяет вращать только теги, такие как <g>, <circle> и <rect>. Я не мог найти способ сделать это.Поверните внешний SVG-файл с помощью D3.js

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

источник

2013-12-09 user2717511

Не могли бы вы просто добавить элемент 'g' в SVG, который вы генерируете и вращаете, добавляя содержимое внешнего SVG к этому элементу' g'? –

Можете ли вы добавить свои оси в разные элементы 'g'? –

Спасибо, это сработало. – user2717511

Вы можете добавить g элемент в SVG можно создавать и добавлять содержимое внешнего SVG к этому. Затем вы можете повернуть его. Любой контент, который вы не хотите поворачивать, можно добавить к другим элементам g.

источник

2013-12-17 14:28:41

Поверните внешний SVG-файл с помощью D3.js

ответ

Смежные вопросы