Pan and zoom an SVG scene.
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.3.1/dist/panzoom.min.js
If you download from CDN the library will be available under panzoom global name.
<!-- this is your html file with svg -->
<body>
<svg>
<!-- this is the draggable root -->
<g id='scene'>
<circle cx='10' cy='10' r='5' fill='pink'></circle>
</g>
</svg>
</body>
// In the browser panzoom is already on the
// window. If you are in common.js world, then
// var panzoom = require('panzoom')
// grab the DOM SVG element that you want to be draggable/zoomable:
var scene = document.getElementById('scene')
// and forward it it to panzoom.
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)
// do work
// ...
// then at some point you decide you don't need this anymore:
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.
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) {
// allow wheel-zoom only if altKey is down. Otherwise - ignore
var shouldIgnore = !e.altKey;
return shouldIgnore;
}
});
See JSFiddle for the demo. The tiger will be
zooomable only when Alt key is down.
You can adjust how fast it zooms, by passing optional zoomSpeed argument:
panzoom(document.getElementById('g4'), {
zoomSpeed: 0.065 // 6.5% per mouse wheel event
});
MIT
FAQs
Extensible, mobile friendly pan and zoom framework (supports DOM and SVG).
The npm package panzoom receives a total of 54,625 weekly downloads. As such, panzoom popularity was classified as popular.
We found that panzoom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.
Security News
Research
Noxia, a new dark web bulletproof host, offers dirt cheap servers for Python, Node.js, Go, and Rust, enabling cybercriminals to distribute malware and execute supply chain attacks.
Company News
Socket safeguards companies from software supply chain attacks by detecting and preventing threats in open source code and empowering developers to secure their applications and critical services against malware and other security risks.