Javascript 设置SVG foreignObject的动画并将其绘制到画布

好吧，这可能是困难和雄心勃勃的

我正在将SVG绘制到画布中。这个SVG基本上包装了一个包含HTML标记的

foreignObject

。我需要它是HTML而不是SVG，因为其中的数据会随着时间而变化，SVG并没有给我太多的灵活性

我正在做的是：

用DOMParser解析SVG

侦听表单中的更新

在每次更新时，序列化更新的DOM并在base64中对其进行转换

在画布上绘制更新图像

它工作完美无瑕。无论如何，当我试图为我的div或整个foreignObject设置动画时，动画从未开始

如何设置此外来对象的动画并在画布上看到它的变化

以下是我迄今为止的尝试：

this.scoreboard = new DOMParser().parseFromString(data, "image/svg+xml");
const root=this.scoreboard.getElementsByTagName('foreignObject')[0];
      root.addEventListener("animationstart", () => console.log('start'));
      root.addEventListener("animationend", () => console.log('end'));
      root.animate([{ transform: 'rotate3d(1,0,0, -90deg);' }, { transform: 'rotate3d(0);' }], { duration: 3000 });

控制台中从不写入“开始”和“结束”