系列文章
Day21 - 控制 SVG 的小小注意事項
上一篇已經出現了使用 jQuery 畫出 SVG 的內容，不過還是寫死的，如果要使用可以讀取 json 的方式，將要用到比較進階的手法，因此，在介紹 SVG...
Day22 - 寫 jquery 產生 SVG 圓餅圖
之前我們提過了 SVG pie chart 圓餅圖實作 和 控制 SVG 的注意事項，現在就要來將兩者結合， 使用 jquery 來畫出圓餅圖，同時使用 js...
Day23 - SVG + CSS 製作 Material Design 進度條
這是一個利用 CSS 與 SVG 所做出來的進度條，仿照 Google Material Design 的設計風格設計，雖然 Google 有提供一系列的扁平...
Day24 - 初探 SVG filter
前面二十幾篇的 SVG 文章已經涵蓋了 SVG 的基本用法和觀念，接下來的幾天，將會開始介紹 SVG 的濾鏡 ( filter )，也將開始進入 SVG 奧妙...
Day25 - SVG filter - feColorMatrix
feColorMatrix 顧名思義就是色彩矩陣的濾鏡，用一個矩陣的計算，將圖片的色彩重新計算後輸出，便可以達到各種不同的色彩變化效果，在此之前，要先介紹一下...
Day26 - SVG filter - feGaussianBlur
使用過 Photoshop 都知道，模糊就跟斯斯一樣多種，其中的一種就是「高斯模糊」，同樣的，在 illustrator 裏頭也有高斯模糊，因此 SVG 也就擁...
Day27 - SVG filter - feComponentTransfer
feComponentTransfer 是針對圖像中每一個像素，利用公式的計算，進行亮度、對比...等調整，其實就有點類似 Photoshop 裏頭的「曲線」...
Day28 - SVG filter - feImage
feImage 是 SVG filter 裏頭最簡單的濾鏡，不過為什麼要用一篇文章專門介紹它呢？就是因為 feImage 可以幫助我們更實際的了解 filte...
Day29 - SVG filter - feDisplacementMap
在玩 photoshop 的時候，我時常會使用一個名為「移置」的特效，這個特效說難不難，可以參考我在 2008 年寫的的教學：photoshop：國旗飄揚皺折...
Day30 - SVG 完整教學 30+1 天
非常感謝 IT 邦幫忙舉辦鐵人賽，因為有了之前的文章，讓我學會了保哥寫的 GIT 和洧杰哥寫的 SASS，今年總算是鼓起勇氣來參賽了，30 天不長不短，但是對自...