Javascript 如何在不触发缓慢重画的情况下在网页周围移动SVG？

我正在使用d3.js在svg元素上绘制一个（多）线图（包含相当多的数据点，确切地说是1600）。 此图形位于一个容器中，该容器上有一个转换

在某个特定事件中，容器通过CSS3转换以400px的速度移动到顶部，该转换在Chrome中运行良好。在Safari和Firefox中尝试时，我注意到速度非常慢。经过一些检查后，我可以99%肯定地说，在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>

---

一般来说，使用

边距

或任何其他CSS位置值使对象在屏幕上移动是次优的。尝试使用创建移动，这将告诉浏览器使用图形优化方法

---

其思想是，变换告诉浏览器在渲染内容块周围移动，而不是重新计算整个布局。结果仍然取决于浏览器实现的质量——正如您所发现的，Chrome在这两种方式中都有很好的优化效果，但这应该会减少浏览器与浏览器之间的差异。

如果您希望元素转换，则必须在中间位置重新绘制。这很有意义。。。同时，我添加了js以在转换期间隐藏图形，并在转换完成时显示（css:display:none；），这使转换再次变得平滑（因为浏览器直到最后才绘制元素）。这不是一个理想的解决方案，因此，如果还有更好的想法，它们会很好。您可以删除过渡。一般来说，使用边距或任何其他CSS位置值使对象在屏幕上移动是次优的。尝试使用变换/转换来创建移动，这将告诉浏览器使用图形优化方法。@AmeliaBR:差别很大！即使不先隐藏图形，过渡也是超级平滑的。谢谢你