Question

我有一个简单的图表，它使用3个d3.js SVG元素来显示不同的东西。我想将其转换为PNG。我在这里找到了这个解决方案：

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

现在这可能正常，如果我只使用一个SVG元素，但如果我试试这个，我会收到此错误：

This page contains the following errors:

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

列419当然是直接在第一次关闭之间＆lt; / SVG＆GT;标签和下一个开头＆lt; SVG＆GT;标签

是否可以仅使用javascript将所有3个元素转换为一张图片？

Answer 1

我不熟悉d3.js，

在此之前，我必须知道，您的代码是否适用于单个svg？您使用多个svg时出错？

如果是，您将尝试以下代码

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

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

1 个答案: