Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot render correctly svg for 1.0.0-rc3 #1944

Open
jdsxzhao opened this issue Jul 25, 2019 · 6 comments
Open

Cannot render correctly svg for 1.0.0-rc3 #1944

jdsxzhao opened this issue Jul 25, 2019 · 6 comments

Comments

@jdsxzhao
Copy link

jdsxzhao commented Jul 25, 2019

Bug reports:

I have a simple code snippet with svg.
<svg class="jss131 jss164" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" width="24" height="24">
<circle cx="12" cy="12" r="12"></circle>
<text class="jss165" x="12" y="16" text-anchor="middle">2</text>
</svg>
If I dont add width and height for this svg, nothing will be rendered by h2c. If add width and height, there is only a black circle. Due to the svg is generated by Meterial-UI, I cannot modify it, so actually it is rendered without width and height attributes which causes no render in h2c.
https://jsfiddle.net/1abjr86o/1/

Specifications:

  • html2canvas version tested with: 1.0.0-rc3
  • Browser & version: Chrome 75.0.3770.142
  • Operating system: Win10
@hakimio
Copy link

hakimio commented Jul 25, 2019

html2canvas doesn't parse the css classes set on SVG elements, you have to inline all your styles. Workaround was provided here. Related issues: #1389, #1380.

Also, html2canvas never worked with SVG images which don't have any width and height set on them.
You can use "onclone" option to modify your cloned dom without effecting the original.

@mihalikv
Copy link

I also facing issue with rendering graphs. With version 1.0.0-rc1, everything works fine but with rc2 and rc3 svg is not rendered. I was trying to do jsfiddle but I am not able to reproduce it there.

@caneta
Copy link

caneta commented Jul 30, 2019

I also facing issue with rendering graphs. With version 1.0.0-rc1, everything works fine but with rc2 and rc3 svg is not rendered. I was trying to do jsfiddle but I am not able to reproduce it there.

The same here: rc.1 works, rc.3 doesn't.

@jdsxzhao
Copy link
Author

jdsxzhao commented Jul 31, 2019

@mihalikv @caneta I just followed @hakimio 's direction that add some specific styles to inline as https://github.com/niklasvh/html2canvas/issues/1380 and add height and width attribute to svg. This way works well. The remaining problem is that some other elements are painted over svg which I guess is caused by painting sequence.

@Lie8466
Copy link

Lie8466 commented Aug 8, 2019

Facing below issues with 1.0.0-rc2 and 1.0.0-rc3. Code works fine with 1.0.0-rc1
image

@hakimio
Copy link

hakimio commented Aug 8, 2019

@Lie8466 PR #1873 might fix your issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants