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值

初始化頁面調用該方法即可實現