svg path rendering speed

Question

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"/>

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?

Answer 1

Use CSS3 transformations.

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.