Closed Overbord closed 1 year ago
An example of the type of CSS I'd like to be using:
.square.blue-bubble-bottom-left {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080"%3E%3Cpath fill="none" d="M0,657C0,438,0,219,0,0c360,0,720,0,1080,0c0,360,0,720,0,1080c-186.7,0-373.3,0-560,0c0.3-1.5,0.4-3.2,0.9-4.6 c19.7-58.2,24.6-117.7,13.7-178.2c-13.7-76.2-48.2-141.9-104.9-194.5c-90.3-83.8-196.9-113-317.7-90.1C71.9,620.2,34.8,635.9,0,657z"%3E%3C/path%3E%3Cpath fill="%23182430" d="M0,657c34.8-21.1,71.9-36.8,112-44.4c120.8-22.9,227.4,6.3,317.7,90.1C486.5,755.4,521,821,534.6,897.2 c10.9,60.5,6,119.9-13.7,178.2c-0.5,1.5-0.6,3.1-0.9,4.6c-173.2,0-346.5,0-520,0C0,939,0,798,0,657z"%3E%3C/path%3E%3C/svg%3E');
}
There doesn't seem to be any errors.
See sample here:
https://dev.overbord.no/sandbox/social/ - please choose Square, then Big Picture, then Bottom Left, which has the SVG in the CSS.
This is the capture code:
jQuery('#download').click(function() {
jQuery('#socialcanvas').removeClass('canvas-zoom-out');
modernScreenshot.domToJpeg(document.getElementById('socialcanvas'), { quality: 1, width:canvWidth, height:canvHeight })
.then(dataUrl => {
var link = document.createElement('a');
link.download = shapetrimmed + ' - ' + fileTitle + '.jpeg';
link.href = dataUrl;
link.click();
jQuery('#socialcanvas').addClass('canvas-zoom-out');
});
});
I have an inline SVG set as a background image using CSS, but modern screenshot can't seem to 'see' it. This is a screenshot:![Screenshot 2023-03-19 at 12-17-30 Social – Nel Sandbox](https://user-images.githubusercontent.com/59527330/226171746-b2b7adf6-80e0-4f2d-8090-7810c8613534.png)
And this is the generated image:![Square - This is the image](https://user-images.githubusercontent.com/59527330/226171762-7997e478-07cf-444c-882d-f00a30106953.jpeg)