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
You can also open the demo and download the SVGPan library here.
<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.
The source of this project is now hosted on Github, so there you can find the latest version.
If you found this code useful please consider donating!