search

exupero / saveSvgAsPng

Save SVGs as PNGs from the browser.
MIT License
1.09k stars 362 forks source link

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

Open pavodev opened 4 years ago

pavodev commented 4 years ago

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 commented 4 years ago

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

pavodev commented 4 years ago

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

vuquanghoang commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

pavodev commented 4 years ago

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 GitHubhttps://github.com/exupero/saveSvgAsPng/issues/234#issuecomment-617214862, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALNMISMJUVC7DKO5O3DO5XDRNWUNPANCNFSM4KEYFH5Q.

guslid commented 4 years ago

Are you also using React?

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

pavodev commented 4 years ago

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.commailto: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)https://github.com/exupero/saveSvgAsPng/issues/234#issuecomment-617214862>, 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 GitHubhttps://github.com/exupero/saveSvgAsPng/issues/234#issuecomment-617381519, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALNMISIDYAB456MSAYFF6QLRNX3DVANCNFSM4KEYFH5Q.