【问题标题】: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】:

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-10-21
      • 1970-01-01
      • 1970-01-01
      • 2021-02-23
      • 2019-04-26
      • 2018-07-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多