本文介绍了svg路径渲染速度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有大约6000个svg路径元素。每个都是:

There are about 6000 svg path elements. Each is like:

<path fill="none" d="M -1180.753662,3450.687500 C -1183.848267,3258.348389
-899.981628, 2965.197998 -707.642639,2962.103516" stroke="#8f87a8"/>

我使用d3平移和缩放事件来平移和缩放整个svg。
似乎html页面必须重新渲染所有的每个平移或缩放,这使行动相当缓慢。

I am using d3 translate and scale events to pan and zoom the whole svg. http://bl.ocks.org/mbostock/3680999It seems that html page has to re-render all of them with each pan or zoom, and that make the action quite sluggish.

有没有反正我可以使平移和缩放更平滑理论?

Is there anyway that I can make pan and zoom smoother in theory?

推荐答案

使用CSS3转换。

Mike Bostock有,并使用CSS3平移和缩放以实现平滑缩放。这种方法有缺点:如果你的缩放容器有文本,它也会得到放大。但这可能对你不重要,你可以解决它。

Mike Bostock has an example of a zoomable map and uses CSS3 translation and scaling to achieve smooth zooming. This approach has drawbacks: if your zoomed container has text, it will get "zoomed in" as well. But this might not matter to you or you can work around it.

这篇关于svg路径渲染速度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-14 15:02