CODEWITHSUNDEEP
svgzoomingjquery-svgpanning
SivaRajini
SivaRajini

Reputation: 7375

How to implement panning like google maps in SVG

I have done zooming in SVG chart. Please refer below screenshot.

enter image description here

above screenshot series is zoomed state.i used clipping concept to hide the outside lines from chart area after zooming.

i need to do panning here ? how can i implement like google maps. when i start pan to move the series and see the zoomed chart of another area. how can i perform "translate" operation for path element in SVG. element in the screenshot is called series (i.e. data points /line).

i need to move the element zoomed area based on mouse movec(i.e. like scrolling the hidden content).

Is "translate" attribute is used to view the other zoomed area ? how can i perform "translate" in path element that will make the panning.

Normal chart screenshot.

enter image description here

Zoomed Screenshot.

enter image description here

Please refer below link.

http://www.cyberz.org/projects/SVGPan/tiger.svg

Thanks,

Siva

Upvotes: 2

Views: 727

Answers (1)

cod3mast3r
cod3mast3r

Reputation: 13

First be sure:

Download svgpan.js file in your project location

is must be the right place in your code

You must add this: xmlns:xlink="http://www.w3.org/1999/xlink"

Upvotes: 0

Related Questions