Javascript 将内联SVG转换为png时出现样式错误

我的高级目标是将包含一些内联svg图像的元素转换为png文件。所有操作都必须使用JavaScript在客户端浏览器中执行。我试过：

使用canvg库并遵循本文中的步骤：

原始svg：

结果:

将css样式展平到标记中，然后按照本文中的步骤调用canvg：

结果：一个空白图像

将css样式展平到标记中，并按照本文中的步骤手动将svg绘制到画布上：

结果：一个空白图像

使用以下代码将css样式展平为内联样式表：

结果：一个空白图像

使用手动下载元素作为.svg文件

结果:

然后，当我将原始svg的计算css与下载的svg进行比较时，我发现下载的svg有正确的svg xml，但有一个不正确的内联样式表，例如图形最右侧的数字200、300，它们是用200绘制的，在我的外部css中，我有：

.scatterChart.axisGraphicsContext文本{ 字号：8px； 填充：777； }

但是，下载的svg的内联样式表中缺少字体大小和填充属性

---

我一直在寻找一个解决方案，通过基于D3的Rickshaw创建的CSS导出PNG。我找到的唯一解决办法是：

对待与SVG不同的DIV，并分别对待他们 使用html2canvas将div和其他非SVG内容转换为画布 使CSS内联到SVG@thirdcreed已将JavaScript代码和D3选择器发布在：-根据需要将其调整为自定义CSS。 使用如下代码将SVG转换为画布

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html2);
var img = '<img src="'+imgsrc+'">';      
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");      
var image = new Image;
image.src = imgsrc;
image.onload = function() {
  context.drawImage(image, 0, 0);
}

将您拥有的不同画布合并为一张 使用以下代码转换为图像：

var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">'; 
d3.select("#pngdataurl").html(pngimg); // contains selector from D3, adjust if you don't use D3
var a = document.getElementById("some_anchor"); // Fix for Firefox: supply an anchor-tag here that is 'display:none' in your document, otherwise download won't work
a.download = "sample.png";
a.href = canvasdata;
a.click();

请注意，除Internet Explorer之外的每个浏览器都要求SVG具有xmlns属性