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

Question

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

The image can be panned (moved around to look at different parts of the svg image with the cursor) simmilar to google maps.
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/

Also this functionality should work on all the broswers including ie(not ie 6) without the need to download and install a svg viewer plugin. — Chandan Jog, Feb 26 '10 at 04:07
No version of IE supports SVG (without a plugin), so this "small script" will at the very least need to convert SVG to VML. That's a pretty big job right there: the SVG spec is 719 pages long! — Ken, Feb 26 '10 at 17:58
@Chandan You've had some useful answers - suggest you accept one of them — peter.murray.rust, Jul 31 '12 at 07:48

score 20 · Answer 1 · answered Sep 28 '10 at 20:13

20

Raphael is good, but not good enough.

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

answered Sep 28 '10 at 20:13

Washa Wu

201
2
2

Does this library have any documentation? It would be great if there were some way to make it zoom in when a specific function was called on a web page. – Anderson Green Feb 26 '13 at 15:39

score 17 · Accepted Answer · answered Dec 18 '12 at 23:09

17

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

answered Dec 18 '12 at 23:09

Daniel Alder

5,031
2
45
55

is this plugin have a documentation or a quick start page? – Yahya KACEM Jul 06 '13 at 13:51
I'm afraid no. There are 2 examples in the examples folder. For more I think you have to contact the author – Daniel Alder Jul 15 '13 at 10:07

score 12 · Answer 3 · edited Jun 14 '12 at 22:34

12

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

edited Jun 14 '12 at 22:34

Olha Puzhay

370
2
9

answered Nov 02 '10 at 19:23

Daniel Assange

121
1
2

Hey, do you have the plugin up anywhere? The github page is no longer available. – Vic Goldfeld Mar 19 '12 at 06:46
5

@VicSzpilman https://github.com/andrewseddon/raphael-zpd ? – Nitrodist Mar 24 '12 at 23:31

score 4 · Answer 4 · answered Mar 01 '10 at 02:37

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

answered Mar 01 '10 at 02:37

Chasbeen

1,448
12
17

Both links are now dead. – Dec 29 '12 at 07:09

score 1 · Answer 5 · answered Mar 27 '10 at 17:53

1

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.

answered Mar 27 '10 at 17:53

Spadar Shut

15,111
5
47
54

score 0 · Answer 6 · answered Aug 08 '14 at 14:31

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.

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

6 Answers6

Linked