svg平移縮放，我剛開(kāi)始嘗試的是自己處理外層容器的控制，結(jié)果發(fā)現(xiàn)能用，但是效果不太好，有拖尾現(xiàn)象，后來(lái)用個(gè)js庫(kù)svg-pan-zoom即可。如果想支持手機(jī)端手勢(shì)操作，需要先安裝Hammer.js。

這里簡(jiǎn)單示范下核心代碼，首先下載并在index.html添加相應(yīng)的js文件：

  <script src="assets/libs/svg-map/js/lib/hammer.min.js"></script>
  <script src="assets/libs/svg-map/js/lib/svg-pan-zoom.min.js"></script>

html中有這樣一個(gè)svg標(biāo)簽：

<svg id="svggroup"><svg>

然后實(shí)現(xiàn)方法：查找該id元素并調(diào)用svgPanZoom初始化，最后在頁(yè)面加載后調(diào)用此方法即可：

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
    });
  }

注：至此其實(shí)已經(jīng)完工了的，但貌似有個(gè)bug——配置選項(xiàng)有個(gè)參數(shù)controlIconsEnabled: false用于控制工具欄是否顯示的，而我用時(shí)發(fā)現(xiàn)無(wú)效果，所以做了額外處理：

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