iT邦幫忙

鐵人檔案

2014 iT 邦幫忙鐵人賽
回列表

SVG 30 天 ~ 就要醬玩 系列

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

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

Day11 - 再談 SVG 漸層色

先前在 SVG 研究之路 (7) - fill 填色 有介紹過 SVG 的 fill 填色,文章後面介紹了基本的漸層填色,但並沒有深入的介紹進一步的設定,然而高...

2014-10-03 ‧ 由 oxxo 分享
DAY 12

Day12 - 有趣的 SVG Patterns

Patterns 是 SVG fill 裏頭的一個有趣元素,記得在 CSS 裏頭,我們可以自訂背景的圖案,達到許多很有特色的變化,然而在 SVG 也是如此,而...

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

Day13 - SVG text 文字

「文字」雖然字面上的解釋很簡單,但深入研究之後,發現 SVG 對於文字的設定,比我想像的複雜得多,但也因為有了這些我所不知道的設定和屬性,讓原本單純樸實的文字,...

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

Day14 - SVG Clipping and Masking

使用過 Illustrator 的朋友應該都會知道,裏頭有一個重要的繪圖功能,就是剪裁和遮色片,這也是在圖形處理上頗為重要的兩個功能,而在 SVG 裏頭這兩個功...

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

Day15 - 再談 SVG defs

在前面的 SVG 研究之路裡,不斷看到 defs 這個元素的身影,從顏色的填充、線段的圖案、濾鏡的定義...等許多的效果,都必須使用 defs 來定義,因此就直...

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

Day16 - SVG transform 基礎篇

在 CSS3 裏頭,我們常常使用到 transform 這個變形的效果,同樣的,對於 SVG 來說,transform 也是重要的變形屬性,與 CSS 一模一...

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

Day17 - SVG transform Matrix

前一篇介紹了 SVG tansform 的前四個基本方法:translate、scale、rotate 和 skew,其實這四個方法都是建構在 Matrix 這...

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

Day18 - 初探 SVG SMIL Animation

SVG 的動畫元素是由 W3C Synchronized Multimedia (SYMM) Working Group 由 Synchronized Mul...

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

Day19 - 深入理解 SVG SMIL Animation

上一篇應該已經大概明白 SVG 的動畫是怎麼一回事,但仍然有很多屬性和設定沒有解釋清楚,然而這些屬性和設定,才是 SVG 動畫的最精華所在,讓我們繼續看下去~...

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

Day20 - SVG pie chart 圓餅圖實作

在之前我所撰寫的 SVG path 的文章 SVG 研究之路 (5) - Path 進階篇 當中,詳細介紹了關於 path 的 A 參數用法,回想一下,A 參...

2014-10-12 ‧ 由 oxxo 分享