score:2

Accepted answer

you can use d3.xml to import the svg document as an xml document and insert the content of the xml in a dom element.

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

a working jsbin is available. regards,


Related Query