我正在使用 d3.js 在 svg 元素上绘制一个（多）线图（有相当多的数据点，准确地说是 1600 个）。
该图位于一个容器中，该容器上有一个过渡。
在某个事件中，容器会通过 CSS3 过渡移动 400px 到顶部，这在 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>
一般来说，使用margin或任何其他使对象在屏幕上移动的 CSS 位置值都不是最佳的。尝试使用变换/翻译风格 https://developer.mozilla.org/en-US/docs/Web/CSS/transform创建运动，这将告诉浏览器使用图形优化方法。
这个想法是，转换告诉浏览器在渲染内容块周围移动，而不是重新计算整个布局。结果仍然取决于浏览器实现的质量 - 正如您所发现的，Chrome 无论如何都有很好的优化，但这应该会减少浏览器之间的差异。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
