中心svg与Ariutta svg-pan-zoom库

Question

我正在使用ariutta / svg-pan-zoom插件来管理SVG元素的平移/缩放。当我点击“缩放重置”时，我想将svg绘图放在包装div中。

<div id="wrapDiv" style="width: 1000px; height: 500px;">
  <svg width="1000" height="500px">
   <g class="viewport">
       ....
   </g>
  </svg>
</div>

Answer 1

缩放重置按钮没有侦听器挂钩。但是，有一个 zoom 和 pan 事件的监听器。您可以在启动后缓存svgpanzoom大小（例如缩放和平移）（使用getSizes）。然后在每个缩放或平移上将新值与初始值进行比较。

为了居中，您可以使用center方法。

// Get instance
var panZoomTiger = svgPanZoom('#demo-tiger');

// Center
panZoomTiger.center();