saveSvgAsPng makes svg's image fill disappear (d3.js)

[pavodev]

I'm getting a strange behavior when triggering the saveSvgAsPng function.
I have two svg shapes (a circle and a triangle generated by d3.js) that are filled with 2 svg images. When the saveSvgAsPng function gets triggered, everything works perfectly except that these two shapes disappear and are not rendered in the exported png file. An other strange thing is that if I try to do "inspect element" all the DOM seems to disappear.
This happens in Firefox for MacOS.
In Chrome for MacOS the shapes doesn't disappear, but the filling images become blurred.

[vuquanghoang]

@pavodev I also have the same issue. Did you use it with a react project?

[pavodev]

Hi @vuquanghoang, yes I'm using it in a React project!

[vuquanghoang]

The reason might be this library stores cache for stylesheet. Whenever we change the content, especially if we use styled-component, the className changes => no longer match. It cannot map style to inline => some shape / appearance missing. my current solution is set extra value for className on some elements use selectorRemap function. it might not good enough but working.

@exupero do you have any idea for this case? can we disable cache in option?

[pavodev]

Actually I'm not using styled components. Most of the SVG styles are managed by d3js (the library I'm using to draw my SVGs) and I fear this is the root problem in my case since both d3js and React work in parallel on the DOM, this may complicate everything

[vuquanghoang]

I can see from the source code this line: if (cachedRules) return cachedRules;

I guess the cached stylesheet might be obsoleted after DOM changes couple of times.

[guslid]

I just tested this library in a prototype I'm building and observed the issue on Firefox and Safari, but not on Chrome.

[pavodev]

Are you also using React? On 21 Apr 2020, 16:27 +0200, Gustav Lidén <notifications@github.com>, wrote: I just tested this library in a prototype I'm building and observed the issue on Firefox and Safari, but not on Chrome. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#234 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALNMISMJUVC7DKO5O3DO5XDRNWUNPANCNFSM4KEYFH5Q>.

[guslid]

Are you also using React?

No, I'm not depending on React and not d3j.js either.

[pavodev]

So this is not caused by the way React manages the DOM or its stylesheets. On 21 Apr 2020, 21:57 +0200, Gustav Lidén <notifications@github.com>, wrote: Are you also using React? On 21 Apr 2020, 16:27 +0200, Gustav Lidén notifications@github.com<mailto:notifications@github.com>, wrote: I just tested this library in a prototype I'm building and observed the issue on Firefox and Safari, but not on Chrome. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#234 (comment)<#234 (comment)>>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALNMISMJUVC7DKO5O3DO5XDRNWUNPANCNFSM4KEYFH5Q. No, I'm not depending on React and not d3j.js either. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#234 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALNMISIDYAB456MSAYFF6QLRNX3DVANCNFSM4KEYFH5Q>.