JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/ariutta/svg-pan-zoom/master/dist/svg-pan-zoom.js"></script>
<script type='text/javascript' src="https://rawgit.com/ariutta/svg-pan-zoom/master/dist/svg-pan-zoom.js"></script>

    <div id="limit-div" style="width: 482px; height: 420px; border:1px solid black; ">
      <svg id="limit-svg" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
        <defs>
          <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(56,121,217);stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:rgb(138,192,7);stop-opacity:1"></stop>
          </linearGradient>
        <style type="text/css">.svg-pan-zoom-control { cursor: pointer; fill: black; fill-opacity: 0.333; } .svg-pan-zoom-control:hover { fill-opacity: 0.8; } .svg-pan-zoom-control-background { fill: white; fill-opacity: 0.5; } .svg-pan-zoom-control-background { fill-opacity: 0.8; }</style></defs>
        <g fill="none" class="svg-pan-zoom_viewport" transform="matrix(1.75,0,0,1.75,81.2499771118164,-8.75)">
          <g stroke="#000" fill="#FFF">
            <rect x="5" y="5" width="240" height="240" fill="url(#linear-gradient)"></rect>
            <path d="M 5 5  L 245 245 Z"></path>
          </g>
        </g>
      <g id="svg-pan-zoom-controls" transform="translate(532 344) scale(0.75)" class="svg-pan-zoom-control"><g id="svg-pan-zoom-zoom-in" transform="translate(30.5 5) scale(0.015)" class="svg-pan-zoom-control"><rect x="0" y="0" width="1500" height="1400" class="svg-pan-zoom-control-background"></rect><path d="M1280 576v128q0 26 -19 45t-45 19h-320v320q0 26 -19 45t-45 19h-128q-26 0 -45 -19t-19 -45v-320h-320q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45...

JavaScript

var beforePan

        beforePan = function(oldPan, newPan){
          var stopHorizontal = false
            , stopVertical = false
            , gutterWidth = (panZoom.getSizes().viewBox.width * panZoom.getSizes().realZoom)
            , gutterHeight = (panZoom.getSizes().viewBox.height * panZoom.getSizes().realZoom)
              // Computed variables
            , sizes = this.getSizes()
            , leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth
            , rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
            , topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight
            , bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)

          customPan = {}
          customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
          customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))

          return customPan
        }

        // Expose to window namespace for testing purposes
        window.panZoom = svgPanZoom('#limit-svg', {
          zoomEnabled: true
        , controlIconsEnabled: true
        , fit: 1
        , center: 1
        , beforePan: beforePan
        });