1

以下动画 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 执行此操作，所以我需要加快速度。还有其他方法可以实现吗？谢谢！

4

1 回答 1

0

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

于 2021-09-15T21:54:06.770 回答