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

【问题标题】：Styling errors when converting inline SVG to png将内联 SVG 转换为 png 时出现样式错误
【发布时间】：2014-09-16 08:23:32
【问题描述】：

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

使用 canvg 库并按照这篇文章中的步骤操作：https://github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223

原始svg：

结果：
将 css 样式展平到 <svg> 标签中，然后按照这篇文章中的步骤调用 canvg：Convert embedded SVG to PNG in-place

结果：一张空白图片。
按照这篇文章中的步骤，将 css 样式展平到 <svg> 标记中并手动将 svg 绘制到画布上： how to save/ export inline SVG styled with css from browser to image file

结果：一张空白图片。
使用以下代码将 css 样式扁平化为内联样式表：http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/

结果：一张空白图片。
使用svg crowbar 手动将<div> 元素下载为.svg 文件。

结果：

然后当我将原始 svg 的计算 css 与下载的 svg 进行比较时，我发现下载的 svg 具有正确的 svg xml 但内联样式表不正确 (<style type="text/css">) 例如数字 200、300在图表的右侧，它们是用 <text x="214" dy=".32em" y="0" style="text-anchor: start;">200</text> 绘制的，在我的外部 css 中，我有：

.scatterChart .axisGraphicsContext text { 字体大小：8px；填写：#777； }

但是，下载的 svg 的内联样式表中没有 font-size 和 fill 属性。

【问题讨论】：

标签： javascript css svg canvg

【解决方案1】：

我一直在寻找一种解决方案，使用通过 Rickshaw 创建的 CSS（基于 D3）导出 PNG。我找到的唯一解决方案是：

将 DIV 与 SVG 区别对待，单独对待它们
使用 html2canvas 将 DIV（和其他非 SVG 内容）转换为画布
使 CSS 内联到 SVG； @thirdcreed 已在以下位置发布了 JavaScript 代码和 D3 选择器：Rickshaw CSS/Axes in JSDOM - 根据需要将其调整为您的自定义 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 属性。

【讨论】：