SVG 研究之路 (20) - transform Matrix

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

首先要先了解 Matrix 的原理,Matrix 就是矩陣,在 SVG 的 transform 裡有六個數值,分別是:matrix(a,b,c,d,e,f),原本的座標、長寬和角度透過矩陣的運算,就可以轉換出一組新的座標、長寬和角度,而剛剛看到的六個參數,其實真正的長相是下圖這個樣子 ( 圖片來源:www.w3.org ):

SVG 研究之路 (20) - transform Matrix

為什麼會長這樣呢?因為是矩陣呀!也因為長這樣,所以轉換的公式就像下圖這樣:

SVG 研究之路 (20) - transform Matrix

也就是說我們原始的 x 轉換後就變成:ax+cy+e,原始的 y 轉換後就變成: bx+dy+f,因此之前的 translate、scale、rotate 和 skew 都可以用 matrix 來作呈現:






以上就是把四個基本的變形方法,使用用 Matrix 來表現,但 Matrix 的強大不單純表現在這裡,我們也可以將 Matrix 互相組合,變成巢狀的 Matrix,根據 W3C 的說法,若組合多個 Matrix ,也可以稱為 CTM ( current transformation matrix ),就可以做出千變萬化的變形囉!

SVG 研究之路 (20) - transform Matrix

SVG 研究之路 (20) - transform Matrix

SVG 研究之路 (20) - transform Matrix

<rect fill="#a0a" width="60" height="50" x="10" y="10" transform="matrix(0.866,0.5,-0.5,0.866,0,0) matrix(1,0,0.577,1,0,0) matrix(1,0,0,1,30,0)" />
<rect fill="none" width="60" height="50" x="10" y="10" stroke="#000" stroke-width="2" />