在Firefox中优化SVG viewBox动画(Optimizing SVG viewBox Animation in Firefox)

在Firefox中优化SVG viewBox动画(Optimizing SVG viewBox Animation in Firefox)

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

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

我想知道是否有其他技术来改进svg重新渲染，比如使用GPU或其他东西？

https://jsfiddle.net/omidh/uwc0y524/1/

当所有viewBox属性一次更改时，大多数都是缓慢的，无论如何要改进这一点？ 我的svg只包含<line>和<circle>

编辑：它在chrome中比firefox更加流畅，所以chrome很好。

编辑：即使Internet Explorer也比firefox好

I'm developing a javascript chart library, I chose svg for this purpose. It's crucial to change viewBox time to time to allow users to see all parts of the chart.

I used snap.svg for animating my viewBox attribute and it's somehow smooth but not satisfying.

I wonder is there other techniques to improve svg re-rendering, like using GPU or something?

https://jsfiddle.net/omidh/uwc0y524/1/

Most sluggish when all viewBox Attributes are changed at once, anyway to improve this? My svg only contains <line> and <circle>

Edit: It's much more smooth in chrome than firefox, so chrome is fine.

Edit: Even Internet Explorer is better than firefox

最满意答案

问题不是动画方法，而是Firefox中的svg Render性能。

以前我在svg中使用了两个<line>每个“x”形状，所以为了减少对象计数，我把它改成一个<polyline> ，这给了我10％ - 20％的渲染速度提升。

The problem is not the Animation method but svg Render performance in Firefox.

Previously I used two <line> per "x" shape in my svg, So to reduce object counts I changed it to one <polyline> which gave me 10% - 20% rendering speed boost.