SVG Object Panning And Zooming Library – svg-pan-zoom-container

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