svg平移缩放

svg平移缩放，我刚开始尝试的是自己处理外层容器的控制，结果发现能用，但是效果不太好，有拖尾现象，后来用个js库svg-pan-zoom即可。如果想支持手机端手势操作，需要先安装Hammer.js。

这里简单示范下核心代码，首先下载并在index.html添加相应的js文件：

html中有这样一个svg标签：

然后实现方法：查找该id元素并调用svgPanZoom初始化，最后在页面加载后调用此方法即可：

initZoomPan(){
    const eventsHandler = {
      haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel']
    , init: function(options) {
        var instance = options.instance
          , initialScale = 1
          , pannedX = 0
          , pannedY = 0
        // Init Hammer
        // Listen only for pointer and touch events
        this.hammer = Hammer(options.svgElement, {
          inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
        })
        // Enable pinch
        this.hammer.get('pinch').set({enable: true})
        // Handle double tap
        this.hammer.on('doubletap', function(ev){
          instance.zoomIn()
        })
        // Handle pan
        this.hammer.on('panstart panmove', function(ev){
          // On pan start reset panned variables
          if (ev.type === 'panstart') {
            pannedX = 0
            pannedY = 0
          }
          // Pan only the difference
          instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY})
          pannedX = ev.deltaX
          pannedY = ev.deltaY
        })
        // Handle pinch
        this.hammer.on('pinchstart pinchmove', function(ev){
          // On pinch start remember initial zoom
          if (ev.type === 'pinchstart') {
            initialScale = instance.getZoom()
            instance.zoom(initialScale * ev.scale)
          }
          instance.zoom(initialScale * ev.scale)
        })
        // Prevent moving the page on some devices when panning over SVG
        options.svgElement.addEventListener('touchmove', function(e){ e.preventDefault(); });
      }
    , destroy: function(){
        this.hammer.destroy()
      }
    }
    const element = document.querySelector('#svggroup');
    svgPanZoom(element, {
      zoomEnabled: true,
      controlIconsEnabled: true,
      dblClickZoomEnabled: false,
      fit: 1,
      center: 1, 
      customEventsHandler: eventsHandler
    });
  }

注：至此其实已经完工了的，但貌似有个bug——配置选项有个参数controlIconsEnabled: false用于控制工具栏是否显示的，而我用时发现无效果，所以做了额外处理：

let a = document.getElementById('svg-pan-zoom-controls');
if(a){
   a.remove();
}