svg路径渲染速度 [英] svg path rendering speed

问题描述

有大约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。 http://bl.ocks.org/mbostock/3680999
似乎html页面必须重新渲染所有的每个平移或缩放，这使行动相当缓慢。

I am using d3 translate and scale events to pan and zoom the whole svg. http://bl.ocks.org/mbostock/3680999 It 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路径渲染速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！