Zooming and panning svg images using raphael.js or some other js library [closed]

Answer 1

I've derived Andrea's SVGPan into a (hopefully) more friendly Raphäel plugin :)

Answer 2

If someone is still interested: I just found this implementation of Pan and Zoom for Raphael. Still a very young project, but interesting enough I think:

https://github.com/escobar5/raphael-pan-zoom

Online demo here: http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html

Answer 3

You can try the scripts from IE9 test page http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml Requires a little tweaking with ids but worked fine for me.

Answer 4

First you need to learn how to install a function that extends Raphael to support zooming... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

Next you want to implement Wout's zooming plugin... http://github.com/wout/raphael-zoom

Answer 5

Raphael is good, but not good enough.

Check out this page: http://code.google.com/p/svgpan/. It does exactly what you asked for.

Answer 6

I ended up using the svg-pan-zoom which is derived from SVGPan, but allows zoomin/panning of an arbitrary svg element within your HTML, and can add controls.

SVGPan works great if your complete page is just a loaded SVG (like the tiger example), but not if your svg is somewhere deeper in the html.