JSFiddle - React, Tailwind, and code Playground

by arjSharma

HTML

<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<body onload="init();">
    <svg id="demo-tiger" width="750px" height="500px">
        <g id="viewport" xmlns:xlink="http://www.w3.org/1999/xlink">
            <rect x="0" y="0" width="20" style="stroke:black;fill" rx="10" height="20" />
            <rect x="50" y="20" width="10" style="stroke:black;" rx="10" height="20" />
            <rect x="1000" y="20" width="10" style="stroke:black;" rx="10" height="30" />
        </g>
    </svg>
    <button type="button" onclick="panToAPoint();">Go To Rect</button>
</body>

JavaScript

var panZoom;

 function init() {
     panZoom = window.panZoom = svgPanZoom('#demo-tiger', {
         zoomEnabled: true,
         controlIconsEnabled: true
     });
 }


 function panToAPoint() {
     // hard coded x and y to test
     panZoom.pan({
         x: 1000,
         y: 20
     });
 }