如何在不触发缓慢重绘的情况下将SVG移动到网页上？ [英] How do you move an SVG around a webpage without triggering slow redraws?

问题描述

我使用d3.js在svg元素上绘制一个（多）线图（有很多数据点，精确到1600）。
这个图是在一个容器中有一个过渡。

I'm using d3.js to draw a (multi)line graph (with quite a few data-points, 1600 to be exact) on an svg element. This graph is in a container which has a transition on it.

在某个事件中，容器移动400px到顶部，CSS3过渡罚款在Chrome。当在Safari和Firefox中尝试时，我注意到这是真的很慢。经过一些检查后，我可以说，在Safari / Firefox（以及其他可能的浏览器）过渡期间，99％的确定性svg元素被重绘了。

On a certain event the container gets moved 400px to the top with a CSS3 transition which works fine in Chrome. When trying in Safari and Firefox I noticed that is was really slow. After some checks I can say with 99% certainty that the svg element gets redrawn during the transition (a lot) in Safari/Firefox (and possible other browsers, too).

有没有反正阻止浏览器重新绘制它不断，直到过渡完成？或者可能会有其他解决方案，使这流利吗？

Is there anyway to prevent the browser redrawing it constantly until the transition is finished? Or maybe other solutions that would make this fluent?

FYI：不绘制SVG元素中的图表使问题消失，所以我确定减速来自SVG元素。

FYI: not drawing the chart in the SVG element makes the issue go away, so I'm certain the slowdown comes from the SVG element.

简化的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位置值使对象在屏幕上移动是次优的。尝试使用转换/翻译样式创建移动，将告诉浏览器使用图形优化方法。

Generally speaking, using margin or any other CSS position value to make objects move around the screen is sub-optimum. Try using a transform/translation style to create the movement, which will tell the browser to use graphical optimization methods.

这个想法是，一个变换告诉浏览器移动一块渲染内容，而不是重新计算整个布局。结果仍将取决于浏览器实施的质量 - 您发现，Chrome浏览器具有良好的优化，但这应该减少浏览器到浏览器的差异。

The idea is that a transform tells the browser to move around a block of rendered content, instead of re-calculating the whole layout. Results will still depend on the quality of the browser's implementation -- as you discovered, Chrome has good optimization either way, but this should reduce the browser-to-browser differences.

这篇关于如何在不触发缓慢重绘的情况下将SVG移动到网页上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！