SVG 拖動以及縮放

有時候,方法不是沒有,而是你找不到

這是找了一上午資源的心路歷程


首先我是需要一個SVG圖的縮放和平移,svg圖是自己做的,然後裏面有自己做的動畫以及其他時間,但是前幾天客戶說要改需求,說需要這個圖實現SVG的拖動和縮放,

MD,我只是一個後端啊,好吧,後端和前端已經感覺沒有區別了。

之前做SVG動畫的時候,學習了一下svg的一些動畫特效,國內的一個博客寫的很好

超級強大的SVG SMIL animation動畫詳解

十分佩服博主

然後轉到SVG的平移,看到了這樣一個文章

如何使用 SVG 進行縮放和平移

這個能做到縮放和平移,但是平移是用方向鍵來進行平移,但是肯定客戶體驗不行,所有放棄

(PS,在谷歌上搜索的時候,也發現完全一樣的文章,好像是搬運的,另外也想過自己寫SVG拖拽,但是總是感覺不盡人意)

然後又看到了D3..JS  這個很強大的圖形化軟件,找到類似的方法

d3.js導入SVG

d3.js 縮放

但是。。。。之前完全沒有研究過d3這個js啊。。。。

然後我又看到了這個

兩者合併,噹噹

唔,(°Д°),我菜啊,

然後我又看到了這個js

實現SVG圖片放大縮小

看起來行,但實際不行

然後我順藤摸瓜看到了SVGpan.js

想看看有沒有類型的教程

但是我找到了另外的一個 

jquery.panzoom.js,然後裏面的最後一個例子完美的實現了我的需求

md,自己真蠢


給你們一隻大腦腐!話說這個之前在GO,js裏面看過耶,感覺很棒的樣子