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

Category: Image , Javascript | April 17, 2021
Author: luncheon
Views Total: 164 views
Official Page: Go to website
Last Update: April 17, 2021
License: WTFPL


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:


# Yarn
$ yarn add svg-pan-zoom-container

$ 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=""></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
       SVG Elements Here

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 Elements Here

Specify the mouse button to drag. Default: Left.

<div data-pan-on-drag="button: right">
       SVG Elements Here

Customize the modifier keys.

<div data-pan-on-drag="modifier: Control">
       SVG Elements Here


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

You Might Be Interested In:

Leave a Reply