search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.47k stars 4.8k forks source link

Cannot draw SVG on the html canvas #1543

Open kikifang opened 6 years ago

kikifang commented 6 years ago

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

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

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

kikifang commented 6 years ago

@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 commented 6 years ago

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

LanderBeeuwsaert commented 6 years ago

@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 commented 6 years ago

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

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:

screen shot 2018-07-20 at 3 21 43 pm
richardhovdsveen commented 3 years ago

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

okpalan2 commented 2 years ago

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 commented 1 year ago

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

richardhovdsveen commented 1 year ago

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