Snap.svg の初戰

《演示效果》

Snap.svg 是一個Javascript 的library,它可以輕易的嵌入.svg格式的圖片到網頁上,而且可以很方便的利用代碼來編輯顏色,大小,甚至動畫,當然它也有提供一些簡單的繪圖功能,可以不用設置canvas就畫出幾何圖形和設置遮罩動畫等,十分的好玩。

 

《Snap.svg の初戰》

點擊查看:演示

 

程式簡介:

由於只是進行Snap.svg的初步認識,所以只是簡單的試試看了幾個動畫的功能,演示裡面包含了基本的動畫漸變功能,遮罩,拖動(Drag)圖形的功能,和嵌入svg的功能,演示裡的圓形是利用自帶的snap程式畫出來的,而四方形則是嵌入的svg圖形。

 

簡單的圓形繪製代碼:

 

加入樣式:

 

嵌入svg圖形:

 

這裡只是初戰,更多強大的功能將列入下次的研究中 😛

 

源碼下載:Click Here

About the author: yayapipi

Leave a Reply

Your email address will not be published.