如何在不触发缓慢重绘的情况下在网页上移动SVG?

时间:2014-02-07 13:34:31

标签: javascript css3 svg d3.js

我正在使用d3.js在svg元素上绘制(多个)线图(具有相当多的数据点,确切地说是1600)。 此图表位于容器中,该容器上有转换。

在某个特定事件中,容器通过CSS3过渡移动400px到顶部,这在Chrome中运行良好。在Safari和Firefox中尝试时,我注意到它确实很慢。经过一些检查后,我可以肯定地说,在Safari / Firefox(以及可能的其他浏览器)的过渡期间(很多),svg元素会被重新绘制。

无论如何都要阻止浏览器不断重绘它直到转换结束?或者也许是其他可以使这种流利的解决方案?

仅供参考:不在SVG元素中绘制图表会使问题消失,所以我确定减速来自SVG元素。

简化的html代码:

<div id="container" style="transition:margin 0.75s; -webkit-transition:margin 0.75s; ">
    <svg id="simple_line" style='height:210px; width:100%;'/>
</div>

1 个答案:

答案 0 :(得分:2)

一般来说,使用margin或任何其他CSS位置值来使对象在屏幕上移动是次优的。尝试使用transform/translation style创建移动,这将告诉浏览器使用图形优化方法。

这个想法是变换告诉浏览器移动一堆渲染内容,而不是重新计算整个布局。结果仍将取决于浏览器实施的质量 - 正如您所发现的,Chrome无论采用哪种方式都有很好的优化,但这应该会减少浏览器与浏览器之间的差异。