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
| Title: | SVGPan demo |
| Description: | Hello |
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, 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, which has been merged into the latest version of SVGPan.
Thanks for the great code, I’ve gone ahead and used it in my project already.
Test
strikeComment by Jack — February 2, 2010 @ 7:59 am
Following 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
}
Comment by Jack — February 2, 2010 @ 8:01 am
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.
Comment by Jack — February 2, 2010 @ 8:20 am
Many thanks for your contribution!
Comment by andrea — February 2, 2010 @ 11:50 am
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?
Comment by james — March 4, 2010 @ 5:01 am
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
Comment by andrea — March 4, 2010 @ 2:33 pm
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.
Comment by james — March 4, 2010 @ 3:21 pm
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
Comment by andrea — March 4, 2010 @ 7:29 pm