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

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answere开发者_如何学编程d with facts and citations.

Closed 8 years ago.

Improve this question

I am in need of a small script that will display an SVG (vector image) within a frame that has 2 functions;

1. The image can be panned (moved around to look at different parts of the svg image with the cursor) simmilar to google maps.

2. The SVG image can be zoomed in and out on also simmilar to google maps except there will be no need to load new imagery as the image is a vector.

For a simmilar script i have seen that works with normal image formats see http://jibbering.com/routeplanner/

---

Raphael is good, but not good enough.

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

---

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

---

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

---

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

---

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.

---

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.