我正在使用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>
答案 0 :(得分：2)
一般来说，使用margin或任何其他CSS位置值来使对象在屏幕上移动是次优的。尝试使用transform/translation style创建移动，这将告诉浏览器使用图形优化方法。
这个想法是变换告诉浏览器移动一堆渲染内容，而不是重新计算整个布局。结果仍将取决于浏览器实施的质量 - 正如您所发现的，Chrome无论采用哪种方式都有很好的优化，但这应该会减少浏览器与浏览器之间的差异。