svg图片拖动与缩放

引入jquery.js文件，svg-pan-zoom.min.js文件 和 hammer.min.js 文件

这三个文件可以在网上搜一下下载

 //svg拖动和缩放
         initPanZoom() {
             this.panZoom = svgPanZoom("#svgId", {
                 zoomEnabled: true,
                 controlIconsEnabled: false,
                 fit: true,
                 center: true,
                 minZoom: 0.5,
                 maxZoom: 10,
                 preventMouseEventsDefault: false,
                 customEventsHandler: {
                     haltEventListeners: [
                         "touchstart",
                         "touchend",
                         "touchmove",
                         "touchleave",
                         "touchcancel"
                     ],
                     init: function(svgopts) {
                         var instance = svgopts.instance,
                             initialScale = 1,
                             pannedX = 0,
                             pannedY = 0;
                         // Init Hammer
                         // Listen only for pointer and touch events
                         (this.hammer = Hammer(svgopts.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
                             svgopts.svgElement.addEventListener("touchmove", function(e) {
                                 e.preventDefault();
                             });
                     },

                     destroy: function() {
                         this.hammer.destroy();
                     }
                 }
             });
         },

加上这段代码，#svgId 换成 对应 svg 的id ，没有id可以通过js或jq设置id值

初始化页面调用该方法即可实现