问题描述
有大约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路径渲染速度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!