svg-pan-zoom simple example

HTML

<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<div id="container" style="width: 300px; height: 300px; border:1px solid black; ">
  <svg id="svg-id" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1">
        <rect x="0" y="0" width="50" height="50" fill="#00f"/>
        <rect x="200" y="0" width="50" height="50" fill="#00f"/>
        <rect x="0" y="200" width="50" height="50" fill="#0ff" id="target"/>
        <rect x="200" y="200" width="50" height="50" fill="#f00"/>
  </svg>
  <button id="move">Zoom to Target</button>
   <button id="reset">Reset</button>
</div>

JavaScript

$(function() {
  panZoomInstance = svgPanZoom('#svg-id', {
    zoomEnabled: true,
    controlIconsEnabled: false,
    fit: true,
    center: true,
    minZoom: 0.1
  });
  
  // zoom out
  panZoomInstance.zoom(0.8);
  
  $("#move").on("click", function() {
 	  $("#reset").click();
  	var bb=$("#target")[0].getBBox();
    var vbb=panZoomInstance.getSizes().viewBox;
    var x=vbb.width/2-bb.x-bb.width/2;
    var y=vbb.height/2-bb.y-bb.height/2;
    var rz=panZoomInstance.getSizes().realZoom;
    var zoom=vbb.width/bb.width;
    panZoomInstance.panBy({x:x*rz,y:y*rz});
    panZoomInstance.zoom(zoom);
  });
  
  $("#reset").on("click", function() {
  	panZoomInstance.fit();
    panZoomInstance.center();
    panZoomInstance.zoom(1);
  });
})