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

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

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

1 个答案: