search

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.4k stars 505 forks source link

SVG gradients are not captured in downloaded image #417

Open GameBear64 opened 11 months ago

GameBear64 commented 11 months ago

I have an element that uses an SVG with a gradient. When I try and download it the result is missing the gradient and is just transparent. No errors are thrown and nothing breaks.

Expected Behavior

This is a screenshot of the page image

Current Behavior

This is the downloaded image image

Possible Solution

¯\_(ツ)_/¯

Steps To Reproduce

Basically the SVG in question is this:

background-image: url("data:image/svg+xml,%3Csvg width='400' height='300' viewBox='0 0 400 300' version='1.1' id='svg5' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs13'%3E%3ClinearGradient id='linearGradient1145'%3E%3Cstop style='stop-color:%237d2027;stop-opacity:1;' offset='0' id='stop1151' /%3E%3Cstop style='stop-color:%23f0eee9;stop-opacity:1;' offset='1' id='stop1143' /%3E%3C/linearGradient%3E%3ClinearGradient xlink:href='%23linearGradient1145' id='linearGradient1147' x1='0' y1='0' x2='400' y2='300' gradientUnits='userSpaceOnUse' /%3E%3C/defs%3E%3Cpath style='display:inline;fill:url(%23linearGradient1147);fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' d='m 0 240 l 160 0 l 0 60 l 240 0 l 0 -240 l -160 0 l 0 -60 l -240 0' id='path1057' /%3E%3Crect style='display:inline;fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect953' width='5' height='240' x='0' y='0' /%3E%3Crect style='fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect1038' width='160' height='5' x='0' y='235' /%3E%3Crect style='display:inline;fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect1044' width='5' height='65' x='155' y='235' /%3E%3Crect style='fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect1046' width='245' height='5' x='155' y='295' /%3E%3Crect style='fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect1048' width='5' height='245' x='395' y='55' /%3E%3Crect style='fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect1050' width='160' height='5' x='240' y='55' /%3E%3Crect style='fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect1052' width='5' height='60' x='240' y='0' /%3E%3Crect style='fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:20;paint-order:fill markers stroke' id='rect1054' width='240' height='5' x='0' y='0' /%3E%3C/svg%3E");

Apply it to any element so that it is visible and try and make an image out of it.

For your convenience I've reproduced it here: https://codesandbox.io/s/epic-chatelet-l243dn

Your Environment

vivcat[bot] commented 11 months ago

👋 @GameBear64

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

SitrucL commented 4 months ago

@GameBear64 Hi, did you manage to find a solution to this? I've encountered a similar issue