Dom-to-image: SVG xlink elements not rendering

Created on 8 Sep 2016  ·  10Comments  ·  Source: tsayen/dom-to-image

dom-to-image doesnt seem to work with SVG elements.

See demo:
https://jsfiddle.net/6x0a6geg/

enhancement

Most helpful comment

Are there any updates on this issue?
Can this be fixed?

All 10 comments

I think that xlink is the problem here. Lib renders SVG fine, but it has to be a child of the node you're rendering

Thanks for the reply. Is there a workaround or do we just need to wait for a fix?

The only thing I can think of as a workaround is to change your page HTML
so that SVG is a child of the node you want to render. But that's probably
not an option. I'll see what we can do to fix the issue, supporting xlink
might be a nontrivial task

On Fri, Sep 9, 2016 at 12:12 PM, cronoklee [email protected] wrote:

Thanks for the reply. Is there a workaround or do we just need to wait for
a fix?


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/tsayen/dom-to-image/issues/60#issuecomment-245874559,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABpydDyhAhR4p_PqHQU_YCqr0DUhK_B7ks5qoTDxgaJpZM4J4GfD
.

Was there any progress or better workaround in this matter? I have the same problem.

Any ideas on how I can I help fix this? This library is amazing and xlinks are essential to our theme generation. I'd love to see this fixed and will spend some time right now investigating.

I wonder if its as simple as including the svg element which contains the symbols with these ids inside the foreign object?

That does seem to be the issue although the results so far have not been excellent. SVGs clipped incorrectly and colours incorrect. Hmm!

index

None the less ensuring that your symbols end up in the resulting foreign object should fix your issue @8Duke8 (you can add an extra option to the toPng / toSvg function to achieve this).

this only seems to work in chrome probably a browser limitation.

Are there any updates on this issue?
Can this be fixed?

Hello.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

unit57 picture unit57  ·  6Comments

piyushSinghalDemo picture piyushSinghalDemo  ·  8Comments

AvanishKumar008 picture AvanishKumar008  ·  8Comments

yangqin007 picture yangqin007  ·  3Comments

ezramod picture ezramod  ·  5Comments