Styles do not show up

[marinagavr]

Hi Eric, I followed your guidelines trying to export a D3-generated tree into an image. It works, except the styles do not show up in the image.

var svgElem = document.querySelector('svg');
addInlineStyles(svgElem) ;
setSVGAttributes(svgElem) ;
var prependStr = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'		
var svgString = prependStr + new XMLSerializer().serializeToString(svgElem);
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgString))); 
image.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  var context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);
 
  var a = document.createElement('a');
  a.download = "tree_diagram.png";
  a.href = canvas.toDataURL('image/png');
  document.body.appendChild(a);
  a.click();
}

Thoughts?

[exupero]

Using this library, exporting a PNG with styles should be as simple as

saveSvgAsPng(document.querySelector('svg')[0], 'tree_diagram.png');

If you're basing your code off my 2014 blog post, know that the proof-of-concept outlined in that post has grown somewhat since then, especially with regard to including CSS styles. This library will work much better, with a lot less manual effort.

[marinagavr]

Thank you, I switched to the library and it worked.

…

On Mon, Jul 23, 2018 at 7:12 PM Eric Shull ***@***.***> wrote: Using this library, exporting a PNG with styles should be as simple as saveSvgAsPng(document.querySelector('svg')[0], 'tree_diagram.png'); If you're basing your code off my 2014 blog post <https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/>, know that the proof-of-concept outlined in that post has grown somewhat since then, especially with regard to including CSS styles. This library will work much better, with a lot less manual effort. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#182 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AnoL5YfZxLEB0ZFJs0EpNPKwsRPR2M6Aks5uJlhCgaJpZM4VaJxn> .

[gs-asachdeva]

Hi @exupero ,
I am using this library and I am facing issue in getting styles for my image. I get 'DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules' issue for my css files. I am locally bundling it using webpack and in production it is served from cdn. Is there a way I can specifically send my css file as a param to the library so that I can avoid these issues, or do you have another solution.

Thanks,
Anchal

[exupero]

Hi @gs-asachdeva. This sounds like a separate issue than the one above. Would you make a new issue where we can discuss the error you're getting?

[lifeinchords]

@gs-asachdeva I had a similar error using this library and another.
I wrote my fix in issue #216 using crossorigin="anonymous" on linked stylesheets