Javascript 如何转换多个SVG'；s到一个PNG图像？

我需要将2个单独的SVG转换为1个PNG图像。我目前有代码用于将1个SVG转换为PNG。这段代码如下所示，我将SVG转换为画布，再转换为PNG

SVG在同一个页面上，我尝试使用一个数组对它们进行迭代并获取它们。我目前正在处理的代码也在下面，但不起作用。关于如何将SVG转换为相同的PNG图像，有什么建议吗

非常感谢

单个SVG到PNG

//将svg转换为png
函数svgToPng（）{
var svg=document.querySelectorAll（'svg'）[0]；
//克隆svg节点
var copy=svg.cloneNode（true）；
//转换为xml格式进行存储/传输
var serializer=新的XMLSerializer（）；
var data=serializer.serializeToString（复制）；
//创建url
var DOMURL=window.URL | | window.webkitURL | | window；
//创建图像/blob
var img=新图像（）；
var blob=new blob（[data]，{type:“image/svg+xml；charset=utf-8”}）；
var url=DOMURL.createObjectURL（blob）；
//创建画布
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//在画布上绘制图像
img.onload=函数（）{
drawImage（img，0，0，$（svg0.width（），$（svg0.height（））；
revokeObjectURL（url，url1）；
var imgURI=canvas.toDataURL（“image/png”）.replace（“image/png”、“image/octet-stream”）；
}
//将新图像发送到窗口
img.src=url；
//返回img.src；
window.open（）.document.write（“”）；
};我使用了您的技术并创建了两个独立的函数。第一个函数
drawSVGToCanvas
通过将单个SVG转换为blob并在图像加载后将其绘制到画布上，从而为单个SVG创建画布。当canvas元素被完全填充时，它返回一个带有canvas元素的承诺

convertSVGsToSingleImage
接受一个SVG元素列表，它将为其循环并为每个SVG元素调用
drawSVGToCanvas
。它会一直等待，直到它们被渲染并继续在单个新画布上绘制返回的画布元素。这就是合并发生的地方


const preview=document.getElementById（'preview'）；
const svgs=document.queryselectoral（'svg'）；
功能图SVGTOCANVAS（svg）{
const{width，height}=svg.getBoundingClientRect（）；
const serializer=新的XMLSerializer（）；
const copy=svg.cloneNode（true）；
const data=serializer.serializeToString（复制）；
常量图像=新图像（）；
const blob=新blob（[data]{
键入：“image/svg+xml；charset=utf-8”
});
const url=url.createObjectURL（blob）；
返回新承诺（解决=>{
const canvas=document.createElement（'canvas'）；
const ctx=canvas.getContext（'2d'）；
画布宽度=宽度；
canvas.height=高度；
image.addEventListener（'load'，（）=>{
ctx.drawImage（图像，0，0，宽度，高度）；
revokeObjectURL（URL）；
解决（画布）；
}，{once:true}）；
image.src=url；
})
}
异步函数convertSVGsToSingleImage（svgs，格式='image/png'）{
const canvas=document.createElement（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const drawSVGs=Array.from（svgs）.map（svg=>drawSVGToCanvas（svg））
const renders=等待承诺。全部（drawSVGs）；
canvas.width=Math.max（…renders.map（render=>render.width））；
canvas.height=Math.max（…renders.map（render=>render.height））；
render.forEach（render=>ctx.drawImage（render，0，0，render.width，render.height））；
const source=canvas.toDataURL（格式）.replace（格式为'image/octet stream'）；
返回源；
}
convertSVGsToSingleImage（svgs）。然后（源=>{
常量图像=新图像（）；
image.addEventListener（'load'，（）=>{
预览。追加（图像）；
})
image.src=源；
});

很抱歉，您的浏览器不支持内嵌SVG。
很抱歉，您的浏览器不支持内嵌SVG。
你好，Nikki，欢迎来到SO。您能在最后一段代码中包含两个SVG供我们试用吗？嗨，埃米尔，谢谢，当然！我在上面的问题中包括了两个SVG示例。
SVG.getBBox（）
为您提供了围绕SVG可见内容的紧密边界框。换句话说：它小于SVG的固有大小，并且x和y不保证为0。很幸运，你的函数没有删除部分内容。我同意。这是我这边的一个实验。我已将其更改为使用
getBoundingClientRect（）
，这将提供更理想的结果。