Skip to content
/ svgpan Public
forked from aleofreddi/svgpan

Tiny Javascript to add pan & zoom to SVG

Notifications You must be signed in to change notification settings

oro8oro/svgpan

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svgpan

Tiny Javascript to add pan ,zoom & drag capabilities to SVG.

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

How to use

You can install svgpan by bower:

bower install svgpan

Alternatively you can download a copy of svgpan.js.

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)">...

A demo is available at vleo.net.

About

Tiny Javascript to add pan & zoom to SVG

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%