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

Question

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

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

有什么方法可以防止浏览器不断重绘它直到过渡完成？或者可能有其他解决方案可以使它流畅？

仅供引用:不在 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>

Answer 1

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

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