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

javascript svg raphael
Chandan Jog picture Chandan Jog · Feb 26, 2010 · Viewed 32.5k times · Source

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/

Answer

Washa Wu picture Washa Wu · Sep 28, 2010

Raphael is good, but not good enough.

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

Related questions

How to access SVG elements with Javascript

I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript. Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning …

Read More
jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I …

Read More
how to change svg text tag using javascript innerHTML

i was using raphaeljs , and i want to show html(not only text) in svg, so i use this code : var r = Raphael("holder", 200, 300); var t = r.text(10, 10, "ssdwqdwq"); t.node.innerHTML='dddd' but i cant change the svg's content , …

Read More