javascript - 使用 D3.js 旋转外部 SVG 文件

Question

我试图在使用 D3.js 单击外部 SVG 文件时旋转该文件。我注意到 SVG 只允许在像 <g> 这样的标签上旋转, <circle>和<rect> 。我找不到实现此目的的方法。

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

Answer 1

您可以将 g 元素添加到生成的 SVG 中，并将外部 SVG 的内容附加到该元素。然后你可以旋转它。您不想旋转的任何内容都可以附加到其他 g 元素。