在 Firefox 中优化 SVG viewBox 动画答案

【问题标题】：Optimizing SVG viewBox Animation in Firefox在 Firefox 中优化 SVG viewBox 动画
【发布时间】：2016-08-02 04:22:33
【问题描述】：

我正在开发一个 javascript 图表库，为此我选择了 svg。不时更改 viewBox 以允许用户查看图表的所有部分至关重要。

我使用snap.svg 为我的 viewBox 属性设置动画，它在某种程度上很流畅，但并不令人满意。

我想知道是否有其他技术可以改进 svg 重新渲染，例如使用 GPU 或其他什么？

同时更改所有 viewBox 属性时最迟钝，无论如何要改善这一点？我的 svg 只包含 <line> 和 <circle>

编辑：chrome比firefox流畅很多，所以chrome没问题。

编辑：即使是 Internet Explorer 也比 firefox 好

【问题讨论】：

优化哪个版本的UA？我们建议的任何内容都可能在您的 UA 的下一个版本中过时或无效。
我可能会展示你在 jsfiddle 上使用的代码，只是为了检查你没有做奇怪的事情。
@RobertLongson 对不起，我不知道你说的 UA 是什么意思，但是我在原帖中添加了一些内容
如果你在 SMIL 中编码，在 Firefox 中可能会更流畅。
@RobertLongson 谢谢我将其更改为 SMIL，但 Firefox 仍然缓慢。要理解差异，请在 Firefox 和 chrome 中打开我的小提琴，然后先在 Firefox 中按页面顶部的“左”按钮，然后在 chrome 中按。您可以轻松看出差异

【解决方案1】：

问题不在于动画方法，而是 svg 在 Firefox 中的渲染性能。

之前我在我的 svg 中为每个“x”形状使用了两个 <line>，因此为了减少对象数量，我将其更改为一个 <polyline>，这让我的渲染速度提高了 10% - 20%。

【讨论】：