将SVG Animation转换为webm或mov

Question

我正在寻找一种可靠且易于执行的方法将纯SVG动画转换为视频格式，最好是 webm 或 mov 。 有问题的动画可以在这里找到 - 这是我的个人作品和学习如何处理SVG的结果：

https://jsfiddle.net/473btp7e/

令我惊讶的是，我的初步搜索仅产生了不完整的答案，结果往往各不相同。经过进一步研究，我发现了this博文，使用MediaRecorder API创建了webm SVG动画。

有没有办法将所述脚本应用到我的动画中，以便得到webm作为结果。

Answer 1

如果仔细查看该示例中的代码，您会看到视频是通过将每个帧逐个绘制到连接到canvas的{​​{1}}上创建的。

所以你需要这样做：暂停每一帧的动画，将该帧画到MediaRecorder上，为下一帧移动一点动画，然后重复。

在链接示例中有用于在画布上绘制SVG的代码，因此棘手的部分是在任何给定时间暂停动画以制作帧，因为您的动画都是CSS。您可以通过暂停动画（canvas）并调整animation-play-state: paused来实现。以下是一个例子：

https://codepen.io/Sphinxxxx/pen/zjXqej?editors=1010

所以你可以在你的代码中做类似的事情：

animation-delay

更新了演示：

https://jsfiddle.net/473btp7e/2/

更新：更好的Firefox支持，以及使用requestFrame()

手动控制每个帧的功能

https://jsfiddle.net/473btp7e/82/