将内联SVG转换为png时的样式化错误 [英] Styling errors when converting inline SVG to png

问题描述

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

1. 使用canvg库并按照此帖中的步骤操作：

   
   
   

   结果：一张空白图片。




2. 将css样式展开为< svg> 标记，并手动将svg绘制到画布上，按照此帖中的步骤操作：
   如何保存/导出内联SVG样式，使用css从浏览器到图像文件

   
   
   

   结果：一个空白图片。




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




4. 使用 svg crowbar 手动将< div> 元素下载为.svg文件。

   
   
   

   结果：

   
   
   
   
   
   

   然后当我比较原始svg计算的css和下载的svg，我发现下载的svg有正确的svg xml，但不正确的内联样式表c $ c>< style type =text / css> ）例如，图形最右边的数字200,300，它们用 ; text x =214dy =32emy =0style =text-anchor：start;> 200< / text> ：

   
   
   

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

   
   
   

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

解决方案

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

• 处理与SVG不同的DIV，并分别处理它们


• 将html2canvas的DIV（和其他非SVG内容）转换为canvas


• 使CSS与SVG内联; @thirdcreed发布了JavaScript代码和D3选择器，在： Rickshaw CSS / Axes in JSDOM <



• 使用

  
  
  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）; //包含来自D3的选择器，如果你不使用D3，调整D3 
   var a = document.getElementById（some_anchor）; // Fix for Firefox：在这里提供一个anchor-tag，在你的文档中是display：none，否则下载不起作用
   a.download =sample.png; 
   a.href = canvasdata; 
   a.click（）; 
    

请注意， SVG具有xmlns属性。

My high level goal is to convert a <div> element containing a few inline svg images to a png file. All operations must be performed within the client browser using JavaScript. I have tried:

1. using canvg library and following the steps from this post: https://github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223

   original svg:

   result:

2. flattening the css styles into the <svg> tag and then calling canvg, following the steps from this post: Convert embedded SVG to PNG in-place

   result: a blank image.

3. flattening the css styles into the <svg> tag and manually drawing the svg onto a canvas, following the steps from this post: how to save/ export inline SVG styled with css from browser to image file

   result: a blank image.

4. flattening the css styles into an inline style sheet using this code: http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/

   result: a blank image.

5. using svg crowbar to manually download the <div> element as an .svg file.

   result:

   then when I compared the computed css of the original svg against the downloaded svg, I found that the downloaded svg had the correct svg xml but an incorrect inline stylesheet (<style type="text/css">) For example the numbers 200, 300 on the far right of the graph, they were drawn with <text x="214" dy=".32em" y="0" style="text-anchor: start;">200</text> and in my external css, I have:

   .scatterChart .axisGraphicsContext text { font-size: 8px; fill: #777; }

   However, the font-size and fill properties were absent from the inline stylesheet of the downloaded svg.

解决方案

I've been searching myself for a solution to export PNG with CSS created through Rickshaw (based on D3). The sole solution I found was to:

• treat the DIVs different from the SVGs, and treat them all individually
• convert the DIVs (and other non-SVG content) with html2canvas to canvas
• make the CSS inline to the SVG; @thirdcreed has posted the JavaScript code and D3 selectors for that at: Rickshaw CSS/Axes in JSDOM - adapt that to your custom CSS as needed.

• convert the SVGs into canvas with code such as

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

• merge the different canvases you have into one

• convert into image with code such as:

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

Note that every browser expect for Internet Explorer requires the SVGs to have the xmlns attribute.

这篇关于将内联SVG转换为png时的样式化错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！