SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library
Some time ago the need for a browser-compatible vectorial language pushed me to consider the SVG markup language (I won’t say anything about Internet Explorer – it’s just unsupported there). The language itself is great, but, as a beginner, I was so disappointed about the fact that on the Internet I couldn’t find ANY library ready to use for panning and zooming features that I had to write one from scratch.
The SVGPan library features:
- Panning (pan à la Google maps) (click on the white background and pan)
- Zooming (using the mouse wheel)
- Element dragging (click on a drawing element and drag it somewhere else)
- Combinations of the above like zooming while dragging
The resulting javascript library is published here, in the hope that someone can find it useful. The library itself is very small and easy to use; and it’s licensed under the BSD license. You can try a demo here
No SVG support at all!
You can also open the demo in a new page and download the SVGPan library here.
The library itself requires a root group to be identified by the id viewport, which confines the SVGPan library effects, and the import of the javascript code as well. For example, to adapt the tiger drawing, it was necessary to add the following:
<script xlink:href="SVGPan.js"/> <g id="viewport" transform="translate(200,200)">...
You may also try another SVG example (triple integral, from Wikipedia).
Zeng Xiaohui has provided a patch to support the mouse wheel on Safari/Chrome and fixed the browser scrollbar issue as well. Both patches have been merged into the latest version of SVGPan.
Note that now this project is hosted on Google Code, so there you can find the latest version.
Thanks for the great code, I’ve gone ahead and used it in my project already.
Test
strikeFollowing is the patch for the mousewheel problem with Safari/Chrome:
setupHandlers(root)
window.addEventListener(‘DOMMouseScroll’, handleMouseWheel, false);if (navigator.userAgent.toLowerCase().indexOf(‘webkit’) >= 0) {
window.addEventListener(‘mousewheel’, handleMouseWheel, false); // Chrome/Safari
}
else {
window.addEventListener(‘DOMMouseScroll’, handleMouseWheel, false);
}
handleMouseWheel(evt)
var z = 1.00 + delta / 90; // Zoom factor: 0.9/1.1var z;
if (evt.detail) {
z = 1.00 + delta / 90; // Zoom factor: 0.9/1.1
}
else {
z = 1.00 + evt.wheelDelta / 1200; // Zoom factor: 0.9/1.1
}
Oops, jumped the gun for a bit, the patch for handleMouseWheel(evt) should’ve been:
var delta;
if (evt.wheelDelta) {
delta = evt.wheelDelta / 3600; // Chrome/Safari
}
else {
delta = -1 * evt.detail / 90; // Mozilla
}
var z = 1 + delta; // Zoom factor: 0.9/1.1
This version reversed the zooming direction (up -> zoom in, down -> zoom out) so that it’s consistent with zooming behavior in browsers. The zoom factor is now consistent across browsers as well.
Many thanks for your contribution!
The code works beautifully on safari, but there seems to be an issue in firefox where the wheel only zooms out:
http://www.studiojarch.com/architecture/architecture-by-location/
Any ideas why this might be?
Hello James,
It looks like the code gets confused by the attributes of the root svg tag. For testing purposes I copied your SVG on my website, removed the svg attributes and got it working on http://www.cyberz.org/projects/SVGPan/architecture_by_location.svg . Also a width/height greater than screen will make a scrollbar appear confusing the browser when using the wheel (the svg gets zoomed and the window gets scrolled down as well), so it should be avoided.
Hope it helps.
Regards,
Andrea
Andrea,
Thank you for the quick response. The script works correctly now, and I kind of figured that the scrollbar on the browser was messing some things up, but the strange thing is that safari computes the data correctly. I am just now learning about svg and how to use script to control svg. It appears that the svg webkit by Brad Neuberg has a zoom and pan prototype that he is working on that will work with his cross browser flash render engine. Have you had any success in getting this to work? If so do you have any tips or sites that may help?
Have not been able to find any samples that show how Brad is getting it to work.
Thanks again,
James.
Hello James,
some time ago I got svgpan.js working on Internet Explorer with the svgweb flash renderer. Unfortunately I haven’t seen any svg zoom&pan implementations around (that’s why I wrote one). If you are going to use svgpan with svgweb let me know the results
Andrea
Andrea,
I looks like the mousewheel event is not being trapped properly. It’ll trigger the main window to scroll if the image is somewhere in the middle. Furthermore, clicking on the graph in Firefox seems to cause the mouse to stick onto the graph and it continues to pan even after releasing the button, and you have to click somewhere else to get around that. I was able to solve both issues by adding the following lines to the mouse event handlers:
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
Regards,
Jack
Hello Jack,
your contribution works great and solved a really bad issue. I already merged your code into the new version of SVGPan.
Thank you!
Regards,
Andrea
Can you put this code up on a source code repository (googlecode, github, launchpad, etc). I would like to send patches to you.
Hello Jeff,
of course, I’ve uploaded it on google code, at the url http://code.google.com/p/svgpan/ . Many thanks for your help.
Andrea
Good Afternoon,
I was actually working on something similar but kept running into issues. I’ve been trying to implement your script for a while this morning. I need something IE comparable so, unfortunately this script might not help. I’ve also run into some issues implementing the script in my svg images. They’re actually maps using decimal degree coordinates for my units. I’ve run into this issue on Chrome, but it seems my numbers are too small for this script to calculate right. I have an example image I’ve created that breaks Chrome it seems. Don’t know if I can post tags in here or if that will mess something up but the skinny is:
1) create a SVG image with viewBox=”0 0 3 3″
2) create a circle cx=”.3″ cy=”.3″ r=”0.2″
3) add an onmouseover=”alert(‘over circle’);” to the circle
I can never get the action listener to fire. Plus when I use the mouse wheel on that, (either zoom in or out) the image will disappear. Can you please advice on what is going on here?
Thank You,
Sean
Hello Sean,
can you give a link with an example?
Andrea
Hey Andrea,
Sorry it took a day, my buddy changed the pw on our domain so I wasn’t able to upload it until now. IE, Chrome, FF, and Opera all handle this differently it seems, and none are correct. This is just a simple example I’ve worked up that by its very nature seems to screw up Chrome, try adding an onmouseover to throw an alert on the circle or path and see what happens if you want. The circle radius and border-width on the paths are the actual values I use in my real application, but I’ve shrunk down the viewBox to enlarge the items further and really demonstrate my point. If you need, I can strip out one of my maps to just a map on an area as well.
http://structuredchaosinc.com/google.svg
Thank You,
Sean
Hello Sean,
it looks like svgpan gets confused by the viewBox attribute of the main SVG tag. Removing the viewbox attribute and giving a proper scale transformation gives a better result: have a look here.
Andrea
I made some tests and i got the following results:
- Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.4) Gecko/20091027 Fedora/3.5.4-1.fc12 Firefox/3.5.4 is showing correct behaviour, can pan, zoom, drag the path element and the circle
- Chrome 4.0.249.43 shows correct pan/zoom behaviour, can drag the path element but cannot drag the circle element. Looks like a click on the circle is not setting the proper event target element (instead the root svg element is passed to the event handler, issuing a screen pan) – browser bug?
Hmm, I’ll do some more testing. I see you’re on a Linux box. I’m on a Windows XP machine currently. Using:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1042 Safari/532.5
Opera/9.80 (Windows NT 5.1; U; en) Presto/2.5.22 Version/10.51
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729)
When I load that url I posted earlier the mouse wheel event is not zooming correct. Did the url work for you or did you download it and view it locally?
Hello Sean, yes. Check out http://www.cyberz.org/projects/SVGPan/google.svg
thanks a lot, this is just what I need for my college paper for thematic mapping and svg
Hi, would it be possible to somehow apply this zoom and pan functionality to an image map such as these?
http://raphaeljs.com/australia.html
http://davidlynch.org/js/maphilight/docs/demo_usa.html
I’m something of a newbie so getting this to work is a bit beyond me I’m afraid!
This library can only zoom and pan SVG documents