Dom-to-image SVG image elements

Viewed 2372

I'm using the brilliant dom-to-image to capture a screenshot of a d3.js dashboard and download as a png.

I've found it works better than it's competitors - the CSS transfers beautifully - but I've come across a stumbling block.

I have some SVG image elements in my dashboard:

<image x="20" y="20" width="300"height="80" 
xlink:href="image/my_image.png"/>

These are either embedded directly onto the svg or as pattern definitions and they are not rendering on the PNG.

This is a know problem and one which has come up on Stack Overflow before but I haven't been able to find a solution. Any thoughts?

1 Answers

In order to get your svg converted to png. Just place your nodeRef in a div and inside that div let your d3.js component be written.Applying nodeRef directly over component will not work.

Related