将 SVG 动画的结尾保存为 png（快速）

Question

以下动画 svg 显示了一个从左向右平移的点：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="432px" height="574px" viewBox="0 0 432 574">
<path d="M217.074,165.651c-36.607,0-66.268,29.589-66.268,66.307c0,36.597,29.66,66.274,66.268,66.274c36.642,0,66.367-29.678,66.367-66.274C283.441,195.241,253.716,165.651,217.074,165.651" fill="#CC0000">
<animateTransform attributeName="transform" type="translate" from="0" to="90" dur="0.01s" fill="freeze"/>
</path>
</svg>

我需要将 svg 以动画结束时的形式保存为 png/jpg。我目前的方法是为动画设置一个非常短的持续时间，最后使用 fill="freeze" 停止它，然后使用 Javascript 在 Chrome 中自动截屏。然而，一张截图大约需要 0.3 秒，我需要为数千个 svg 做这件事，所以我需要加速它。还有另一种方法可以实现吗？谢谢！

Answer 1

似乎没有办法实现这一点。我最终的解决方法是编写一个函数来插入 animateTransform 语句，将它们插入 SVG 代码，并在每个插值步骤存储一个 SVG。缺点是这仅适用于 animateTransform 语句。

将 SVG 动画的结尾保存为 png（快速）

Save end of SVG animation as png (quickly)

javascript

python

svg

svg-animate

animatetransform