Question

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

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

提前致谢！

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。的问候，

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

1 个答案: