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.

wheel event on mobile, mouse wheel zoom, javascript mouse wheel up or down, jquery wheel event, mousewheel event, scroll vs wheel event

A Free Online Spinning Wheel App Written in jQuery | Lucky Spin

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.