javascript - 是否可以将 SVG 图像插入到页面上已呈现的现有 SVG 元素中？

Question

我想弄清楚是否可以将现有的外部 SVG 图像(另存为 .svg)插入到使用 Javascript(在我的例子中使用 d3.js)呈现的 SVG 对象中。

我似乎找不到与此相关的任何内容，但看起来应该是相当明显的事情。我想我总是可以将它附加为一个模式，但考虑到这似乎是不正确的。

提前致谢!

Answer 1

您可以使用 d3.xml 将 SVG 文档导入为 XML 文档，并将 XML 的内容插入到 DOM 元素中。

// Create the SVG Element with D3
var div = d3.select('#example'),
    svg = div.append('svg')
     .attr('width', 200)
     .attr('height', 200);

var g = svg.append('g')
   .attr('class', 'svg-container');

var url = 'http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg';

// Load the XML data
d3.xml(url, 'image/svg+xml', function(error, xml) {

    // Insert the SVG image as a DOM node
    g.node().appendChild(document.importNode(xml.documentElement, true));

    // Acess and manipulate the iamge
    var svgImage = g.select('svg');

    svgImage
        .attr('width', 50)
        .attr('height', 50);
});

工作jsBin可用。问候，