Cannot draw SVG on the html canvas

[kikifang]

Description

I'm trying to draw a SVG image (please see code.html.txt) on the html canvas, using html2canvas v1.0.0-alpha.12. But, not successful.

The html2canvas might not support all kinds of SVG elements in Chrome browser, I guess. I'm not sure that this is a Chrome security restriction, or a html2canvas fault. This has blocked my work.

Oops... :(

Specifications:

1. html2canvas version tested with: 1.0.0-alpha.12
2. Mac

• Browser & version: Chrome Version 66.0.3359.181
• Operating system: Mac OS Version 10.13.4.

3. Windows

• Browser & version: Chrome Version 62.0.3202.94
• Operating system: Windows latest version

[fuggfuggfugg]

Pretty sure SVG is not supported, I had to use https://github.com/canvg/canvg to first convert all SVG to canvas and then print it out.

You can also take a look at this example. http://rahulgaba.com/front-end/2016/07/14/generating-pdf-using-jspdf-and-html2canvas.html

[LanderBeeuwsaert]

Hmmm, I'm using html2canvas together with svg's. I don't have any problems with it.

[kikifang]

@LanderBeeuwsaert

Could you copy me your SVG file? As my issue described, it works in Safari browser, but doesn't work in Chrome. Thank you.

[mockey-jockey]

@LanderBeeuwsaert
Could you please put it on jsfiddle woking example with the combination of html2canvas and svg

[LanderBeeuwsaert]

@mockey-jockey ,

Hey, not too familiar with jsfiddle, so if you prepare the dependencies for me in jsfiddle and then send me the link so I can complete (only have to replace the svg with my svg) I'd be happy to.

[motodimago]

I can not capture this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">...</svg>

But I can capture this svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">...</svg>

I just add width and height.

[elramus]

Experiencing similar issues here. Inline SVGs not rendered into canvas.

In Safari it seems to work fine, but only if all properties are included inline within the SVG. So if you're adding your dimensions, fill, stroke, etc. through CSS stylesheet, they won't show up and it won't work.

In Chrome and in Firefox, I cannot get it to render inline SVGs at all. Strange.

Update: when enabling ForeignObjectRendering as an option, Chrome now renders the SVG but they're in the wrong place, and for some reason this also had the affect of forcing text into a different font. In Firefox, enabling this throws this error:

[richardhovdsveen]

My svg is rendering, but get a bit offset (about 150 px)

[okpalan]

Looking through this issue ,I encountered a solution online.it is at https://jsfiddle.net/oz3tjnk7. Note ,it does not contain the use of this library ,but a vanillas implementation https://jsfiddle.net/oz3tjnk7/

[george-wb]

@richardhovdsveen any chance you solved the SVG offset issue? my SVGs are also rendered by about that many pixels as well.

[richardhovdsveen]

@george-wb Ended up with calculating the difference when it appeared. At least thats what I remember :)