如何从HTML内嵌SVG获取可绘制到Canvas的SVGImageElement？

直接获取的内联SVG元素（SVGSVGElement）无法直接传给drawImage，因为该方法仅接受符合CanvasImageSource规范的对象（如HTMLImageElement）。我们可以通过将内联SVG序列化为Data URL，再基于该URL创建图像对象的方式实现需求，具体步骤如下：

1. 获取内联SVG并序列化为字符串 #

先获取页面中的SVG元素，再用XMLSerializer将其转换为标准SVG字符串。

2. 转换为Data URL格式 #

把SVG字符串包装成data:image/svg+xml;charset=utf-8,开头的Data URL，同时对字符串进行URL编码以避免解析错误。

3. 创建Image对象并绘制到Canvas #

通过new Image()创建图像实例，设置其src为生成的Data URL，等待加载完成后即可调用drawImage绘制。

完整TypeScript代码示例 #

// 获取Canvas及上下文
const canvas = document.getElementById('my-canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
if (!ctx) return;

// 获取页面中的内联SVG元素
const svgElement = document.getElementById('svg-circle') as SVGSVGElement;

// 将SVG序列化为字符串
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgElement);

// 生成SVG的Data URL
const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;

// 创建图像并绘制到Canvas
const img = new Image();
img.onload = () => {
  ctx.drawImage(img, 0, 0, 25, 25);
};
img.src = svgDataUrl;

关于类型断言的说明 #

你之前尝试将获取到的元素断言为SVGImageElement是错误的——页面中直接定义的<svg>标签对应的DOM类型是SVGSVGElement，而SVGImageElement特指SVG内部的<image>标签，二者并非同一类型，因此断言后无法正常工作。

内容的提问来源于stack exchange，提问作者Adam Benson