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

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

我似乎找不到任何与此相关的东西，但它似乎应该是相当明显的事情。我想我总是可以把它作为一种模式，但考虑到这一点，它似乎是不正确的

---

提前谢谢

您可以使用

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

---

有一个工作台。关于，

您有两个选择。如果只想将外部SVG用作静态图像（如徽标），请使用d3创建

元素，并在

xlink:href

属性中引用SVG文件。如果希望外部SVG成为DOM结构的一部分，则可以与其他内容交互。