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

Category: Image , Javascript | September 14, 2019
Author: luncheon
Views Total: 561
Official Page: Go to website
Last Update: September 14, 2019
License: WTFPL

Preview:

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

Description:

A lightweight vanilla JavaScript plugin which enables zoom and pan functionalities on an SVG object.

With this plugin, your users are able to the zoom in/out inline SVG image with 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>

Changelog:

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