A library to manipulate svg images with equal priority given to touch and mouse events. The library is built to support pan/drag and zoom events of large svg images (Originally created for navigation over a map)
Uses Hammer.js to access both touch and mouse events. Uses Hammer.js fake multi-touch and show touches for development.
Support for mouse wheel zooming is packaged as a plugin. Plugins are also in development for swipe selection of menu's (Swishly) and to support simple tap selection on the rest of the page (tap manager)
This library is used by setting up a static viewboc for inline svg and to use the meta tag below to disable default panning and scrolling behaviour.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
To justify the svg use the included style sheet.
<link href="style/svg_style.css" rel="stylesheet" />
Insert the following script tags to the main html document
<script src="js/hammer.min.js"></script> <script src="js/hammer.fakemultitouch.js"></script> #optional <script src="js/hammer.showtouches.js"></script> #optional <script src="js/svgAgile.js"></script>
Initialise svgAgile with the init call passing the svg group to manipulate as an argument