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="#00f"/>
        <rect x="200" y="200" width="50" height="50" fill="#f00" id="target"/>
  </svg>
  <button id="move">Zoom to Red</button>
   <button id="move2">Zoom Calculated</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() {
    panZoomInstance.zoomAtPoint(4,{x:270,y:270});
  });
  
  $("#move2").on("click", function() {
  	var bb=$("#target")[0].getBBox();
    var x=bb.x+bb.width/2;
    var y=bb.y+bb.height/2;
    panZoomInstance.zoomAtPoint(4,{x:x,y:y});
  });
})