html2canvas failing when trying to capture embedded SVG

[redyczek]

I'm using html2canvas to capture a diagram (bar chart), created by SVGGraph and rendered as an SVG. The chart is inside a <div> which is the target of html2canvas. The <div>s have a yellow background to better see what happens.

If I include the SVG using an <img> tag, html2canvas works like a charm. However, that way I lose the interactivity of the diagram (tooltips, links, etc.)

If I include the SVG using either an <embed> tag or an <iframe>, I get the interactivity, but html2canvas fails (empty image).

All files (html, php, js) are on the same server.

Is there a known limitation / issue with capturing (interactive) SVGs, or this maybe an indication of a problem with the SVG?

I've set up a simple public test page here: http://gobo-net.de/h2c/

• Copying the graph in the tag works (appended at end of document)
• Copying the graph in the tag doesn't work (adding empty yellow space at end of document)

---

(The following part of the original comment was identified as having nothing to do with the issues)

Google Chrome does give me the following error message (when using <embed> tag or an <iframe>) , but I'm not sure whether that's even related to html2canvas:

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at XMLDocument.<anonymous> (chrome-extension://bpjfchmapbmjeklgmlkabfepflgfckip/src/content/sidebar.js:812:17)

[coder0107git]

When I lookup the chrome extension by the id I find Password Safe by MATESO. When I look through the source code of the src/content/sidebar.js I can't find any problems. Even though I don't have that extension installed I get the same results.

[redyczek]

Thanks for the reply! I've updated my original post accordingly.

[ionansantos]

up

[ionansantos]

I have a similar problem, I can't capture an iframe from spotify, youtube, the capture is empty does anyone know how to solve it?

[coder0107git]

Sorry that this is so late. I think you can't capture an iframe from a different origin without running into CORS problems unless you use a CORS proxy. If you aren't already using some kind of CORS proxy I would suggest it because html2canvas by itself does not bypass CORS restrictions. In the html2canvas documentation it suggest using the html2canvas-proxy. For more information about it see here.