2014年9月29日

SVG 研究之路 (26) - 有趣的 Patterns

Posted by oxxo on 9/29/2014 12:21:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-26-patterns.html

摘要：
Patterns 是 SVG fill 裏頭的一個有趣元素，記得在 CSS 裏頭，我們可以自訂背景的圖案，達到許多很有特色的變化，然而在 SVG 也是如此，而 SVG 比 CSS 更加強大的地方，是你所有的圖案幾乎都可以在 SVG 裏頭畫出來 ( 當然強調細節的點陣圖案例外 )，以下將介紹 Patterns 的相關屬性與參數設定，並直接來看一些 Patterns 的範例。

2014年9月28日

SVG 研究之路 (25) - 再談漸層填色

Posted by oxxo on 9/28/2014 12:21:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-25-gradients-patterns.html

摘要：
前在 SVG 研究之路 (7) - fill 填色 有介紹過 SVG 的 fill 填色，文章後面介紹了基本的漸層填色，但並沒有深入的介紹進一步的設定，然而高深莫測的漸層填色 ( Gradient ) 在 SVG 的 fill 裡面學問還真是不少，所以專門用一篇文章來解釋漸層填色，如此使用 fill 也才能更正確更靈活。廢話不多說，立馬來看漸層 Gradient ，漸層有兩種，第一種是線性漸層 ( Linear gradients ) ，第二種是圓形漸層 ( Radial gradients ) ，因為是漸層，所以要這樣子定義：

2014年9月27日

SVG 研究之路 (24) - 寫 jquery 產生圓餅圖

Posted by oxxo on 9/27/2014 01:25:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-24-jquery-pie-chart.html

摘要：
之前我們提過了 SVG 研究之路 (12) - pie chart 圓餅圖實作 和 SVG 研究之路 (14) - 控制 SVG 的注意事項，現在就要來將兩者結合， 使用 jquery 來畫出圓餅圖，同時使用 json 的格式來長出特定的角度和顏色，如此一來，在不需要 D3.js 或 C3.js 等 SVG js 框架的輔助下，也可以自己做出一個動態產生的圓餅圖，而且還很好用喔！( 如果對於圓餅圖的產生還不熟悉的人，請點選上面的連結回去再次閱讀一下吧！ )

2014年9月25日

SVG 研究之路 (23) - 理解 viewport 與 viewbox

Posted by oxxo on 9/25/2014 01:24:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html

摘要：
記得我初次接觸 SVG 的時候，常常為了定位和大小感到相當的疑惑，有時候明明設定了這樣的大小，莫名其妙的又變成了另外的大小，也不知道該如何去設定，直到看了 W3C 的定義 之後，總算才明白了箇中原理，雖然我們都知道 SVG 該如何去使用，但往往一開始卻忽略了 SVG 的許多設定，所以這篇文章我們回頭仔細看看相關的設定，對於之後的圖形操作，也才能夠真正的融會貫通，也不需要一查再查了。

2014年9月22日

SVG 研究之路 (22) - 深入理解 SMIL Animation

Posted by oxxo on 9/22/2014 08:04:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-22-smil-animation-2.html

摘要：
上一篇應該已經大概明白 SVG 的動畫是怎麼一回事，但仍然有很多屬性和設定沒有解釋清楚，然而這些屬性和設定，才是 SVG 動畫的最精華所在，讓我們繼續看下去~ XD(英文夠好的人也可以來 W3C 這邊 瞧瞧)

2014年9月21日

SVG 研究之路 (21) - 初探 SMIL Animation

Posted by oxxo on 9/21/2014 08:04:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html

摘要：
SVG 的動畫元素是由 W3C Synchronized Multimedia (SYMM) Working Group 由 Synchronized Multimedia Integration Language (SMIL，同步多媒體集成語言) 所規範開發，SMIL 規劃具有許多的參數與設定值 ( 可以參考 W3C 的規範 )，也因為有了這些設定，我們便可以輕鬆的控制 SVG 圖形，這篇將介紹 SVG 基本的動畫，進階動畫控制的部分會在"下一篇文章進行分享。

SVG 研究之路 (20) - transform Matrix

Posted by oxxo on 9/21/2014 12:12:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-20-transform-matrix.html

摘要：
前一篇介紹了 SVG tansform 的前四個基本方法：translate、scale、rotate 和 skew，其實這四個方法都是建構在 Matrix 這個最重要的變形方法之上，只是因為 Matrix 真的要寫起來實在太過複雜，因此在許多效果上都直接省略了，不過如果可以了解 Matrix 的原理，面對更複雜的變形問題，也可以迎刃而解，就讓我們來進入 Matrix 的世界吧！

SVG 研究之路 (19) - transform 基礎篇

Posted by oxxo on 9/21/2014 12:11:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-19-transform.html

摘要：
在 CSS3 裏頭，我們常常使用到 transform 這個變形的效果，同樣的，對於 SVG 來說，transform 也是重要的變形屬性，與 CSS 一模一樣，SVG 的 transform 不外乎就是這五個方法：translate、scale、rotate、skew、matrix，這篇將介紹基本的前四個方法，下一篇會繼續介紹 matrix 這個比較複雜的方法。

2014年9月16日

SVG 研究之路 (18) - 再談 defs

Posted by oxxo on 9/16/2014 11:56:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-18-defs.html

摘要：
在前面的 SVG 研究之路裡，不斷看到 defs 這個元素的身影，從顏色的填充、線段的圖案、濾鏡的定義...等許多的效果，都必須使用 defs 來定義，因此就直接寫了這篇關於 defs 的文章，也把這個常見但用法又時常不同的元素，一次做一個整理，也方便之後使用的參考。

2014年9月8日

中秋節與 APPLE 發表會

Posted by oxxo on 9/08/2014 11:57:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/apple-moon.html

摘要：
2014 年中秋節後緊接著的就是 APPLE 的發表大會，雖然說自己手上有著 iphone、ipad2 和 macbook 和一本賈伯斯傳，但說真的對蘋果的了解真的沒有很深，不過身為一個設計師，一定要把中秋節的月亮和蘋果 logo 結合在一起一下！難得使用 Sigma 500mm 的砲管，總算把月亮拍的一清二楚啦！

SVG 研究之路 (17) - Stroke-marker

Posted by oxxo on 9/08/2014 04:17:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-17-storke-marker.html

摘要：
在 SVG 研究之路 (16) - Stroke-miterlimit 和 SVG 研究之路 (6) - stroke 邊框 都有介紹了 stroke 的用法，其實 stroke 還有另外一個特別的功能可以設定，就是「marker」，顧名思義，就是在線段的起點、中間點或結束點，加上我們自訂的符號，就可以讓折線圖更有特色。

2014年9月6日

SVG 研究之路 (16) - Stroke-miterlimit

Posted by oxxo on 9/06/2014 04:17:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-16-storke-miterlimit.html

摘要：
在之前 SVG 研究之路 (6) - stroke 邊框 有介紹過邊框的用法，不過其實 Stroke 還有其他的屬性可以設定使用，以下將介紹：「stroke-miterlimit」這個線段屬性，與之前相同，這篇仍舊會搭配一些 illustrator 來說明，因為我覺得，能回歸圖形思考，才是向量「圖」的真實面貌。

2014年9月2日

穿透的 div ( pointer-events )

Posted by oxxo on 9/02/2014 04:16:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/pointer-events.html

摘要：
pointer-events 是一個滿有趣的 CSS3 屬性，雖然主要是針對 SVG ，但其中幾個屬性應用在 div 上也是頗有意思。顧名思義，這是一個針對滑鼠事件的屬性，預設值為 auto，若值為 none，則可以穿越該元素，點擊到下方的元素。除了 auto 和 none，這是完整的屬性列表： pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit，除了 auto 與 none，其他都是控制 SVG 的屬性，若採用預設值，則 SVG 就是以 visiblePainted 來表現。
訂閱： 文章 (Atom)