问题
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?
回答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.
来源：https://stackoverflow.com/questions/17907769/svg-path-rendering-speed