Styling errors when converting embedded SVG to png

Question

My high level goal is to convert an element <div>containing several embedded svg images to a png file. All operations must be performed in the client browser using JavaScript. I tried:

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

  original svg:

  

  result:

  

• smoothing CSS styles into a tag <svg>, and then calling canvg, following the steps from this post: Converting embedded SVG to PNG in place

  result: blank image.

• css <svg> svg , : / SVG css

  : .

• css : http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/

  : .

• svg crowbar <div> .svg.

  :

  

  , css svg 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 {   font-size: 8px;   : # 777; }

  svg.

Answer 1

PNG CSS, Rickshaw ( D3). , , :

• DIVs, SVG,
• DIV ( SVG) html2canvas
• CSS SVG; @thirdcreed JavaScript D3 : Rickshaw CSS/Axes 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.