Snap.svg的可視化學習

最近公司有作人物畫像的想法，東找找西找找，用了three、go.js、canvas等可視化。最後想經過svg來繪畫，無心中看到張鑫旭的一箇中文文檔翻譯：Snap

這裏說一下爲何看好一點Snap

首先是animate的屬性，Snap可以使用animate屬性給某個或者幾個圖形添加動畫。

這裏說一下，不少canvas動畫都是經過requestAnimationFrame這個屬性來進行幀動畫，每次對canvas進行清除畫布，而後從新渲染一遍，也許有人會說局部從新渲染或者item的渲染，可是這樣也會產生複雜的計算量，也許能夠經過vue那樣的雙向數據綁定來實現數據檢查，我以前寫過一個sgraphy的canvas組件，使用的就是requestAnimationFrame動畫。

svg優點

svg的點擊操做你能夠很快的獲取到你點擊的量，而canvas你須要比對鼠標位置信息，計算得出你的鼠標位置和item之間的距離，若是須要添加上縮放、放大操做更加複雜一些。

demo

這裏給一個Snap的小demo