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

Question

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

1. 使用 canvg 库并遵循这篇文章中的步骤:https://github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223

   原始 svg:

   

   结果:

   

2. 将 css 样式扁平化为 <svg>标记然后调用 canvg，按照这篇文章中的步骤操作:Convert embedded SVG to PNG in-place

   结果:一张空白图片。

3. 将 css 样式扁平化为 <svg>按照这篇文章中的步骤，标记并手动将 svg 绘制到 Canvas 上: how to save/ export inline SVG styled with css from browser to image file

   结果:一张空白图片。

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

   结果:一张空白图片。

5. 使用 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 文本{ 字体大小:8px； 填充:#777；

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

Answer 1

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

• 将 DIV 与 SVG 区别对待，并单独对待它们
• 使用 html2canvas 将 DIV(和其他非 SVG 内容)转换为 Canvas
• 将 CSS 内嵌到 SVG 中； @thirdcreed 已在以下位置发布了 JavaScript 代码和 D3 选择器:Rickshaw CSS/Axes in JSDOM - 根据需要使其适应您的自定义 CSS。

• 使用如下代码将 SVG 转换为 Canvas

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

• 将您拥有的不同 Canvas 合并为一个

• 使用如下代码转换成图片:

  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 属性。