svg图片拖动与缩放
引入jquery.js文件，svg-pan-zoom.min.js文件 和 hammer.min.js 文件
这三个文件可以在网上搜一下下载
1 //svg拖动和缩放 2 initPanZoom() { 3 this.panZoom = svgPanZoom("#svgId", { 4 zoomEnabled: true, 5 controlIconsEnabled: false, 6 fit: true, 7 center: true, 8 minZoom: 0.5, 9 maxZoom: 10, 10 preventMouseEventsDefault: false, 11 customEventsHandler: { 12 haltEventListeners: [ 13 "touchstart", 14 "touchend", 15 "touchmove", 16 "touchleave", 17 "touchcancel" 18 ], 19 init: function(svgopts) { 20 var instance = svgopts.instance, 21 initialScale = 1, 22 pannedX = 0, 23 pannedY = 0; 24 // Init Hammer 25 // Listen only for pointer and touch events 26 (this.hammer = Hammer(svgopts.svgElement, { 27 inputClass: Hammer.SUPPORT_POINTER_EVENTS ? 28 Hammer.PointerEventInput : Hammer.TouchInput 29 })), 30 // Enable pinch 31 this.hammer.get("pinch").set({ enable: true }), 32 // Handle double tap 33 this.hammer.on("doubletap", function(ev) { 34 //instance.zoomIn(); 35 }), 36 // Handle pan 37 this.hammer.on("panstart panmove", function(ev) { 38 // On pan start reset panned variables 39 if (ev.type === "panstart") { 40 pannedX = 0; 41 pannedY = 0; 42 } 43 44 // Pan only the difference 45 instance.panBy({ 46 x: ev.deltaX - pannedX, 47 y: ev.deltaY - pannedY 48 }); 49 pannedX = ev.deltaX; 50 pannedY = ev.deltaY; 51 }), 52 // Handle pinch 53 this.hammer.on("pinchstart pinchmove", function(ev) { 54 // On pinch start remember initial zoom 55 if (ev.type === "pinchstart") { 56 initialScale = instance.getZoom(); 57 instance.zoom(initialScale * ev.scale); 58 } 59 60 instance.zoom(initialScale * ev.scale); 61 }), 62 // Prevent moving the page on some devices when panning over SVG 63 svgopts.svgElement.addEventListener("touchmove", function(e) { 64 e.preventDefault(); 65 }); 66 }, 67 68 destroy: function() { 69 this.hammer.destroy(); 70 } 71 } 72 }); 73 },
加上这段代码，#svgId 换成 对应 svg 的id ，没有id可以通过js或jq设置id值
初始化页面调用该方法即可实现
