Javascript 将SVG字符串转换为URL Blob并插入画布？

我有一个我似乎无法解决的问题。。。 当我在“context.drawImage（img，0，0）”函数中放置一个具有正确文件路径的“Image（）”对象（SVG类型）时，一切似乎都正常工作

但是，我需要不断修改SVG的某些部分，例如在不拉伸图形的情况下进行缩放，这在常规画布函数中似乎是不可能的，或者至少不足以满足我的需要

以前我在没有画布的情况下将SVG元素放在DOM中，然后使用getElementByID（）和setAttribute（）操作其属性时，就能够做到这一点，这两种方法都很有效。然而我无法把它放到画布上

因此，我的想法是将SVG数据视为TS/JS文件中的字符串，然后将其转换为图像文件，最后将其放到画布上。 问题是它不会渲染任何内容，但如果将“blob”链接复制到浏览器，它将正确显示

下面是StackBlitz项目来演示问题：

部分代码：

let svg = `<svg id="svg-1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
       ...
     </svg>`;

const blob = new Blob([svg], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
const image = document.createElement("img");
image.addEventListener("load", () => URL.revokeObjectURL(url), {
  once: true
});

image.src = url;

console.log(image.src);
console.log(url); // Check the URL in the browser, including blob:,
// it should display fine.

ctx.drawImage(image, 0, 0, 100, 100); // I don't get why it doesn't
// ctx.restore();

让svg=`
...
`;
constblob=newblob（[svg]，{type:“image/svg+xml”}）；
const url=url.createObjectURL（blob）；
const image=document.createElement（“img”）；
image.addEventListener（“加载”，（）=>URL.revokeObjectURL（URL）{
一次：对
});
image.src=url；
console.log（image.src）；
console.log（url）；//检查浏览器中的URL，包括blob:，
//它应该显示良好。
ctx.drawImage（图像，0，0，100，100）；//我不明白为什么没有
//ctx.restore（）；

drawImage需要进入eventListener回调。drawImage需要进入eventListener回调。