技術 Day15 - 再談 SVG defs

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

技術 Day14 - SVG Clipping and Masking

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

技術 Day13 - SVG text 文字

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

技術 Day12 - 有趣的 SVG Patterns

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

技術 Day11 - 再談 SVG 漸層色

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

技術 Day10 - SVG fill 填色

介紹過了 stroke 邊框之後，接下來就要介紹 fill 填色。( oxxostudio.tw 同步發表：SVG 研究之路 (7) - fill 填色 ，現在...

技術 Day9 - 理解 SVG viewport 與 viewbox

前一天的文章裡有提到 viewbox ，但是總覺得沒有直接來篇文章介紹，觀念上再遇到的時候又會亂掉了。這篇主要會介紹 viewport ，當中包含了 viewb...

技術 Day8 - SVG Stroke-marker

在前兩篇都有介紹了 stroke 的用法，其實 stroke 還有另外一個特別的功能可以設定，就是「marker」，顧名思義，就是在線段的起點、中間點或結束點，...

技術 2014 鐵人賽慢慢開始跑 [d3js 與 SVG]

和朋友有聊到鐵人賽這次的發文問題，確實問題挺多的...，或許這也是鐵人的挑戰之一吧，不過還好我有自備Blog，建議可以連到我提供的網址觀看～ 以下文章同步發表於...

技術 Day7 - SVG Stroke-miterlimit

在之前 SVG 研究之路 (6) - stroke 邊框 有介紹過邊框的用法，不過其實 Stroke 還有其他的屬性可以設定使用，以下將介紹：「stroke-...

技術 Day6 - SVG stroke 邊框

前面的章節都在介紹繪製形狀，而我都是使用單純的線條來描繪形狀的邊框，因此這篇就來聊聊 stroke ( 邊框 ) 的設定。( oxxostudio.tw 同步發...

技術 Day1 - 初探 SVG

第一次參加鐵人賽真是緊張，在很多想寫的主題下，選擇了 SVG，主要除了瀏覽器已經都開始支援，更重要的是自己對圖形與設計的愛，對於視覺設計師而言，向量繪圖和基礎動...

技術 HTML5 與 SVG圖形入門

SVG（Scalable Vector Graphics） SVG是一種XML語法而且已經納入HTML之中，可以把互動圖形放在您的網頁裡面（放在<svg&...