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

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

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

   原始 svg：

   result:

2. 将 css 样式扁平化为<svg>标记，然后调用 canvg，按照本文中的步骤操作：将嵌入的 SVG 就地转换为 PNG https://stackoverflow.com/questions/5433806/convert-embedded-svg-to-png-in-place/21318963#21318963

   结果：空白图像。

3. 将 css 样式扁平化为<svg>标记并手动将 svg 绘制到画布上，按照本文中的步骤操作：如何将使用 css 样式的内联 SVG 从浏览器保存/导出到图像文件 https://stackoverflow.com/questions/15181452/how-to-save-export-inline-svg-styled-with-css-from-browser-to-image-file/18006981#18006981

   结果：空白图像。

4. 使用以下代码将 css 样式展平为内联样式表：http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/ http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/

   结果：空白图像。

5. using svg 撬棍 http://nytimes.github.io/svg-crowbar/手动下载<div>元素作为 .svg 文件。

   result:

   然后，当我将原始 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 文本 { 字体大小：8px； 填充：#777； }

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

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

• 将 DIV 与 SVG 区别对待，并单独对待它们
• 使用 html2canvas 将 DIV（和其他非 SVG 内容）转换为 canvas
• 使 CSS 内联到 SVG； @thirdcreed 已在以下位置发布了 JavaScript 代码和 D3 选择器：JSDOM 中的人力车 CSS/轴 https://stackoverflow.com/questions/21996847/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 属性。