对SVG foreignObject进行动画处理并将其绘制到画布上

Question

好吧，这可能很困难而且雄心勃勃。

我正在将SVG绘制到画布中。该SVG基本上包装了包含HTML标签的foreignObject。我需要使用HTML而不是SVG，因为其中的数据会随时间变化，并且SVG不能给我带来太大的灵活性。

我正在做的是：

1. 使用DOMParser解析SVG
2. 收听来自表单的更新
3. 在每次更新时，序列化更新的DOM并将其转换为base64
4. 在画布上绘制更新图像。

它完美无瑕。无论如何，当我尝试为div或整个foreignObject设置动画时，动画永远不会开始。

我如何为这个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 });

'start'和'end'永远不会写在控制台中