在Javascript中将多个SVG元素转换为PNG

Question

I have a simple chart that uses 3 d3.js SVG elements to display different stuff. I want to convert that to PNG. I found this solution on here:

function saveImage(){

var html = d3.selectAll("svg")
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .node().parentNode.innerHTML;

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'"/>';
d3.select("#svgdataurl").html(img);
console.log(html);
};

Now this probably works fine, if i would only use one SVG element, but if i try this, i get this error:

This page contains the following errors:

error on line 1 at column 419: Extra content at the end of the document 

Column 419 is, of course directly between the first closing < /svg> tag and the next opening < svg> tag.

Is it possible to convert all 3 elements into one picture using only javascript?

Answer 1

I'm not familiar with d3.js ,

Before that, I have to know that, Does your code working well for single svg? You got a error on multiple svg used right?

If it is, you will try the following code

function saveImage(){

var html = d3.selectAll("svg")
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .node().parentNode.innerHTML;
for(var i=0;i<html.length;i++)
{
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html[i]);
var img = '<img src="'+imgsrc+'"/>';
d3.select("#svgdataurl").html(img);
console.log(html[i]);
}
};