中心 svg 与 Ariutta svg-pan-zoom 库

【问题标题】：Center svg with Ariutta svg-pan-zoom library中心 svg 与 Ariutta svg-pan-zoom 库
【发布时间】：2014-05-09 15:22:37
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript svg

【解决方案1】：

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

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

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

// Center
panZoomTiger.center();

【讨论】：