iT邦幫忙

鐵人檔案

2014 iT 邦幫忙鐵人賽
回列表

SVG 30 天 ~ 就要醬玩 系列

利用 30 天的時間搞懂 SVG 的原理與應用,讓網頁設計更如虎添翼~

鐵人鍊成 | 共 31 篇文章 | 36 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21 - 控制 SVG 的小小注意事項

上一篇已經出現了使用 jQuery 畫出 SVG 的內容,不過還是寫死的,如果要使用可以讀取 json 的方式,將要用到比較進階的手法,因此,在介紹 SVG...

2014-10-13 ‧ 由 oxxo 分享
DAY 22

Day22 - 寫 jquery 產生 SVG 圓餅圖

之前我們提過了 SVG pie chart 圓餅圖實作 和 控制 SVG 的注意事項,現在就要來將兩者結合, 使用 jquery 來畫出圓餅圖,同時使用 js...

2014-10-14 ‧ 由 oxxo 分享
DAY 23

Day23 - SVG + CSS 製作 Material Design 進度條

這是一個利用 CSS 與 SVG 所做出來的進度條,仿照 Google Material Design 的設計風格設計,雖然 Google 有提供一系列的扁平...

2014-10-15 ‧ 由 oxxo 分享
DAY 24

Day24 - 初探 SVG filter

前面二十幾篇的 SVG 文章已經涵蓋了 SVG 的基本用法和觀念,接下來的幾天,將會開始介紹 SVG 的濾鏡 ( filter ),也將開始進入 SVG 奧妙...

2014-10-16 ‧ 由 oxxo 分享
DAY 25

Day25 - SVG filter - feColorMatrix

feColorMatrix 顧名思義就是色彩矩陣的濾鏡,用一個矩陣的計算,將圖片的色彩重新計算後輸出,便可以達到各種不同的色彩變化效果,在此之前,要先介紹一下...

2014-10-17 ‧ 由 oxxo 分享
DAY 26

Day26 - SVG filter - feGaussianBlur

使用過 Photoshop 都知道,模糊就跟斯斯一樣多種,其中的一種就是「高斯模糊」,同樣的,在 illustrator 裏頭也有高斯模糊,因此 SVG 也就擁...

2014-10-18 ‧ 由 oxxo 分享
DAY 27

Day27 - SVG filter - feComponentTransfer

feComponentTransfer 是針對圖像中每一個像素,利用公式的計算,進行亮度、對比...等調整,其實就有點類似 Photoshop 裏頭的「曲線」...

2014-10-19 ‧ 由 oxxo 分享
DAY 28

Day28 - SVG filter - feImage

feImage 是 SVG filter 裏頭最簡單的濾鏡,不過為什麼要用一篇文章專門介紹它呢?就是因為 feImage 可以幫助我們更實際的了解 filte...

2014-10-20 ‧ 由 oxxo 分享
DAY 29

Day29 - SVG filter - feDisplacementMap

在玩 photoshop 的時候,我時常會使用一個名為「移置」的特效,這個特效說難不難,可以參考我在 2008 年寫的的教學:photoshop:國旗飄揚皺折...

2014-10-21 ‧ 由 oxxo 分享
DAY 30

Day30 - SVG 完整教學 30+1 天

非常感謝 IT 邦幫忙舉辦鐵人賽,因為有了之前的文章,讓我學會了保哥寫的 GIT 和洧杰哥寫的 SASS,今年總算是鼓起勇氣來參賽了,30 天不長不短,但是對自...

2014-10-22 ‧ 由 oxxo 分享