Estoy usando el siguiente código para convertir 1 SVG a PNG. Convierto el SVG a lienzo a PNG.

 getDownloadURL = async () => { // Logic to convert SVG to PNG const svg = document.querySelector('#widget svg'), canvas = new OffscreenCanvas(svg.clientWidth*3, svg.clientHeight*3), svgString = new XMLSerializer().serializeToString(svg), ctx = canvas.getContext('2d'), v = await Canvg.fromString(ctx, svgString, presets.offscreen()); await v.render(); const blob = await canvas.convertToBlob(), pngUrl = URL.createObjectURL(blob); return pngUrl; } download = filename => { const a = document.createElement('a'); a.download = filename; getDownloadURL().then(url => { a.href = url; document.body.appendChild(a); a.click(); a.remove(); }); };

Si trato de convertir más de 1 SVG reemplazando const svg = document.querySelector('#widget svg') a const svg = document.querySelector('#widget') porque el elemento #widget tiene 2 SVG, el PNG resultante tiene 2 SVG superpuestos entre sí.

¿Cómo puedo solucionar este problema de superposición? Sería genial si pudiera representar el contenido del elemento #widget tal como está en PNG.