如何将 svg 内联元素转换为画布？ [复制]

【问题标题】：how to convert svg inline element to canvas? [duplicate]如何将 svg 内联元素转换为画布？ [复制]
【发布时间】：2022-02-19 12:58:20
【问题描述】：

heloo 男人和女人

在我的网络应用程序中，有一个 svg 元素（不是文件）。我想把它转换成画布。（就像截图一样）

你能分享一些实践吗？

这是一个节点项目。所以我不想导入script tag

你能帮忙吗？

【问题讨论】：

您不必发送脚本，只需将其转换为 base64。

标签： javascript typescript svg canvas web-applications

【解决方案1】：

我已经尝试过了，您可以使用类似以下的方法：

const canvas = document.getElementById("theCanvas");
const svg = document.getElementById("theSvg");
const context = canvas.getContext('2d');
const image = new Image();
image.addEventListener('load', () => {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
}, false);
image.src = URL.createObjectURL(new Blob([svg.outerHTML], {type: 'image/svg+xml'}));

【讨论】：