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

Rotate external SVG file with D3.js

本文关键字：SVG 文件 外部 旋转 D3 js 使用      更新时间：2024-05-09

当我用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);
});

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

相关文章：