panzoom
Pan and zoom an SVG scene.
Demo
Usage
Grab it from npm and use with your favorite bundler:
npm install panzoom --save
Or download from CDN:
https://cdn.rawgit.com/anvaka/panzoom/v1.0.0/dist/panzoom.min.js
If you download from CDN the library will be available under panzoom
global name.
<body>
<svg>
<g id='scene'>
<circle cx='10' cy='10' r='5' fill='pink'></circle>
</g>
</svg>
</body>
var scene = document.getElementById('scene')
panzoom(scene)
If your use case requires dynamic behavior (i.e. you want to make a scene not
draggable anymore, or even completely delete an SVG element) make sure to call
dispose()
method:
var instance = panzoom(scene)
instance.dispose()
This will make sure that all event handlers are cleared and you are not leaking
memory
When user starts/ends dragging the scene, the scene will fire panstart
/panend
events. By default they will bubble up, so you can catch them any time you want:
document.body.addEventListener('panstart', function(e) {
console.log('pan start', e);
}, true);
document.body.addEventListener('panend', function(e) {
console.log('pan end', e);
}, true);
See JSFiddle console for a demo.
Ignore mouse wheel
Sometimes zooming interferes with scrolling. If you want to alleviate it you
can provide a custom filter, which will allow zooming only when modifier key is
down. E.g.
panzoom(document.getElementById('g4'), {
beforeWheel: function(e) {
var shouldIgnore = !e.altKey;
return shouldIgnore;
}
});
See JSFiddle for the demo. The tiger will be
zooomable only when Alt
key is down.
license
MIT