Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an SVG object.

How to make use of it:

Installation:

# Yarn
$ yarn add svg-pan-zoom-container
# NPM
$ npm install svg-pan-zoom-container --save

Import the SVG-pan-zoom-container into the doc.

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 including the next attribute container.

<div data-zoom-on-wheel
     data-pan-on-drag>
     <svg>
       SVG Elements Here
     </svg>
</div>

Possible choices 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 tug.

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

SVG Object Panning And Zooming Library, SVG Pan Zoom Plugin/Github

See Demo And Download

Official Website(luncheon): Click Here

This superior jQuery/javascript plugin is developed by luncheon. For extra Advanced Usages, please go to the official website.