Javascript 将SVG元素转换为img

所有相关问题都没有答案。 我想从DOM中获取SVG图形，并将其转换为img

这就是我的函数现在的样子

const SVG = document.querySelector('svg')!;
const canvas = document.createElement('canvas');

const XML = new XMLSerializer().serializeToString(SVG);
const SVG64 = btoa(XML);
const image64 = 'data:image/svg+xml;base64,' + SVG64;

const img = new Image();
img.onload = function() {
  canvas.getContext('2d')!.drawImage(img, 0, 0);
};

img.src = image64;

document.getElementById('container')!.appendChild(img);

还有DOM

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
   <circle cx="25" cy="25" r="20" />
</svg>

<div id="container"></div>

结果是一个空白图像。它确实有一个数据URL作为src，但完全为空。为什么呢？它应该如何工作？

监视错误：

const SVG=document.querySelector（'SVG'）！；
const XML=new XMLSerializer（）.serializeToString（SVG）；
const SVG64=btoa（XML）；
const img=新图像（）；
img.高度=500；
img.width=500；
img.src='数据：image/svg+xml；base64'+SVG64；
document.getElementById（'container'）！。儿童（img）
SVG:


监视错误：


const SVG=document.querySelector（'SVG'）！；
const XML=new XMLSerializer（）.serializeToString（SVG）；
const SVG64=btoa（XML）；
const img=新图像（）；
img.高度=500；
img.width=500；
img.src='数据：image/svg+xml；base64'+SVG64；
document.getElementById（'container'）！。儿童（img）
SVG:


谢谢。回答得很好。但是我必须弄清楚，如果我删除“！”的话，为什么对象可能是空的。顺便说一句，我在北京工作React@jonask添加的
if
check在执行if检查后仍会获得一个空白imgadded@jonask看我的答案，它是有效的，你的问题是你用感叹号。我已经检查了我的代码：Chrome、Safari、Opera、Mozilla是的，我可以看到代码片段运行良好。但即使我复制粘贴它也不行。不知道为什么会这样。回答得很好。但是我必须弄清楚，如果我删除“！”的话，为什么对象可能是空的。顺便说一句，我在北京工作React@jonask添加的
if
check在执行if检查后仍会获得一个空白imgadded@jonask看我的答案，它是有效的，你的问题是你用感叹号。我已经检查了我的代码：Chrome、Safari、Opera、Mozilla是的，我可以看到代码片段运行良好。但即使我复制粘贴它也不行。不明白为什么