如何在不触发缓慢重绘的情况下，在网页周围移动SVG？
如何在不触发缓慢重绘的情况下，在网页周围移动SVG？
提问于 2014-02-07 13:34:30
我使用d3.js在svg元素上绘制一个(多)线图(有相当多的数据点，确切地说是1600 )。这个图位于一个容器中，容器上有一个转换。
在某个事件中，容器会被移动400 in到顶部，通过CSS3转换，这在Chrome中工作得很好。在尝试Safari和Firefox时，我注意到这是非常慢的。经过一些检查后，我可以肯定地说，svg元素在Safari/Firefox (以及可能的其他浏览器)转换过程中被重新绘制(很多)。
是否存在阻止浏览器不断地重新绘制它直到转换完成为止？或者其他的解决办法能让这一切变得流畅？
FYI:如果没有在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
Stack Overflow用户
回答已采纳
发布于 2014-02-09 03:10:49
一般来说，使用margin或任何其他CSS位置值使对象在屏幕周围移动是次优。尝试使用转换/翻译风格创建移动，这将告诉浏览器使用图形优化方法。
其思想是，转换告诉浏览器在呈现的内容块周围移动，而不是重新计算整个布局。结果仍然将取决于浏览器的实现质量--正如您发现的，Chrome有很好的优化方式，但这将减少浏览器与浏览器之间的差异。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21629134
复制相关文章
相似问题
腾讯云开发者
