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

问题描述

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

我正在将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,-90deg);' },{ transform: 'rotate3d(0);' }],{ duration: 3000 });

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）