如何解决对SVG foreignObject进行动画处理并将其绘制到画布上
好吧,这可能很困难而且雄心勃勃。
我正在将SVG绘制到画布中。该SVG基本上包装了包含HTML标签的foreignObject
。我需要使用HTML而不是SVG,因为其中的数据会随时间变化,并且SVG不能给我带来太大的灵活性。
我正在做的是:
- 使用DOMParser解析SVG
- 收听来自表单的更新
- 在每次更新时,序列化更新的DOM并将其转换为base64
- 在画布上绘制更新图像。
它完美无瑕。无论如何,当我尝试为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 举报,一经查实,本站将立刻删除。