Author: | luncheon |
---|---|
Views Total: | 1,199 views |
Official Page: | Go to website |
Last Update: | August 26, 2022 |
License: | WTFPL |
Preview:

Description:
A lightweight vanilla JavaScript plugin that enables zoom and pan functionalities on an SVG object.
With this plugin, your users are able to zoom in/out inline SVG image with the mouse wheel, and pan the inline SVG image with mouse drag.
Basic usage:
Installation:
# Yarn $ yarn add svg-pan-zoom-container # NPM $ npm install svg-pan-zoom-container --save
Import the svg-pan-zoom-container into the document.
import { pan, zoom, getScale, setScale, resetScale } from 'svg-pan-zoom-container';
<-- or from a cdn --> <script src="https://unpkg.com/svg-pan-zoom-container"></script>
Enable the zoom and pan functionalities on the SVG object by adding the following attribute to the parent container.
<div data-zoom-on-wheel data-pan-on-drag> <svg> SVG Elements Here </svg> </div>
Possible options for the SVG zoom functionality.
<div data-zoom-on-wheel="zoom-amount: 0.002; min-scale: 1; max-scale: 10; scaling-property: 'width/height'"> <svg> SVG Elements Here </svg> </div>
Specify the mouse button to drag. Default: Left.
<div data-pan-on-drag="button: right"> <svg> SVG Elements Here </svg> </div>
Customize the modifier keys.
<div data-pan-on-drag="modifier: Control"> <svg> SVG Elements Here </svg> </div>
Changelog:
v0.6.1 (08/26/2021)
- removed IE support.
v0.5.1 (04/17/2021)
- support modifier key for pan
v0.5.0 (03/09/2021)
- update
v0.4.0 (12/26/2020)
- feat: support panning when scale < 1
v0.3.1 (11/26/2020)
- Fixed SVG content is not centered/correctly panned when scale is < 1
- Removed `scalingProperty` option (to reduce maintenance costs)
v0.2.7 (03/14/2020)
- fix: remove scrollbar thickness margins on windows.
v0.2.6 (09/14/2019)
- fix: remove console.log
v0.2.4 (07/06/2019)
- fix: scroll position jumping
v0.1.3 (03/30/2019)
- fix: preventDefault() error on chrome