JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<script src="http://timmywil.github.io/jquery.panzoom/dist/jquery.panzoom.js"></script>
<div id="zControls">
    <button class="zoom-out">Zoom Out</button>
    <input type="range" class="zoom-range"></input>
    <button class="zoom-in">Zoom In</button>
    <button id="pan">Pan</button>
</div>
<svg width="200" height="200" viewBox="0 0 200 200">
    <g id="viewport">
        <rect x="95" y="95" width="10" height="10" style="fill:#000"></rect>
    </g>
</svg>

<p>Mouse over the svg element and check out the clientX(<span id="x"></span>) and clientY(<span id="y"></span>) values</p>

CSS

#zControls {
    position: relative;
    z-index: 1;
}

JavaScript

var $x = $('#x'), $y = $('#y');
var svg = $('svg').on('mousemove', function(e) {
    $x.text(e.clientX);
    $y.text(e.clientY);
})[0];
var box = svg.getBoundingClientRect();
var $panzoom = $("#viewport").panzoom({
    cursor: 'default',
    increment: 4,
    minScale: 0.5,
    maxScale: 16,
    rangeStep: 2,
    transition: true,
    duration: 200,
    easing: "ease-in-out",
    $zoomIn: $('.zoom-in'),
    $zoomOut: $('.zoom-out'),
    $zoomRange: $('.zoom-range'),
    focal: {
        clientX: 108,
        clientY: 132
    }
});

var instance = $panzoom.panzoom('instance');
instance.parentOffset = { top: 32, left: 8 };

$('#pan').on('click', function(e) {
    $panzoom.panzoom('pan', 10, 10, { relative: true, animate: true });
});