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

Question

我的高级目标是将包含几个内联svg图像的<div>元素转换为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绘制到画布上： 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 on在图表的最右边，它们是用<text x="214" dy=".32em" y="0" style="text-anchor: start;">200</text>绘制的，在我的外部CSS中，我有：

   .scatterChart .axisGraphicsContext text {     font-size：8px;     填写：＃777; }

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

Answer 1

我一直在寻找通过人力车创建的CSS导出PNG的解决方案（基于D3）。我找到的唯一解决方案是：

• 将DIV与SVG区别对待，并单独处理它们
• 使用html2canvas将DIV（和其他非SVG内容）转换为canvas
• 使CSS内联到SVG; @thirdcreed已经在Rickshaw CSS/Axes in JSDOM发布了JavaScript代码和D3选择器 - 根据需要将其调整为自定义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);
  }
  

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

• 使用以下代码转换为图片：

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