Svg學這些就夠了 transform（二）

上一節《svg學這些就夠了-組合復用（一）》我們學習了svg的組合復用，一次定義就可以在圖中任意引用了，不過如果只是簡單引用未免太就小看svg的功能了，再組合復用的基礎上，我們本節詳細介紹下svg的transform屬性功能，這個屬性非常強大。

tranform屬性用來對乙個元素宣告乙個或多個變換。它輸入乙個帶有順序的變換定義列表的值。每個變換定義由空格或逗號隔開。有效地svg變換有：平移、縮放、旋轉,、傾斜。transform屬性中使用的變換函式類似於css中transform屬性使用的css變換函式，除了引數不同。

1.平移

平移translate(x,y)，在原有座標的位置的基礎上，在二維平面上沿x軸、y軸移動，平移後針對該圖形做縮放或旋轉時的座標參考係是以平移的座標為原點的，這個後面講到縮放旋轉時會說明。平移的示例如下：

畫布大小為400*400，單元圖案的大小為100*100，將單元圖案平移到畫布的各個位置組成該圖，原始碼如下：

2.縮放縮放scale(x,y)，針對單元圖案，在x軸、y軸上按比例縮放，x,y的縮放的比例，示例如下：

為了說明縮放裡的映象翻轉，找了乙個不是對稱圖形的圖案【蝸牛】，如下：

第1張圖的縮放比例為scale(-1,1)效果為原圖的x軸翻轉

第2張圖在scale(2,1)效果為x軸方向放大2倍

注意：在上述縮放中示例中，我們都是先平移到某個位置後再縮放，縮放也是基於平移後的位置來縮放的，平移後單位圖案的左上角為平移座標點translate(x,y)，以此為原點，對單位圖案進行xy軸的縮放，如果縮放係數為正，則向右向下縮放，如果為負，則向相反方向縮放。3.旋轉旋轉函式rotate(d,cx,cy)對於給定的點(x,y)和旋轉角度(d)值執行旋轉。角度值預設單位是度。可選的cx和cy值代表旋轉中心點。如果沒有設定cx和cy，旋轉點是當前使用者座標系的原點。示例如下：

第1個格仔的圖為單元圖案原圖，旋轉角度為0

第2個格仔的圖旋轉角度為45度

為什麼旋轉45度是往這個方向呢，好像和我們的常識不一致，應該逆時針才對啊，這要從電腦或者的座標系說起，x軸方向向右，y軸方向向下，和我們在數學上學的y軸向上不一樣，這就導致了旋轉方向不一樣了。

其他的旋轉圖案建下面的原始碼，中間的為3個圖案旋轉疊加，後面的圖案會把前面的覆蓋。

4.傾斜svg元素也可以被傾斜，要傾斜乙個元素，你可以使用乙個或多個傾斜函式skewx 和 skewy，函式skewx宣告乙個沿x軸的傾斜；函式skewy宣告乙個沿y軸的傾斜。傾斜函式的引數單位是角度。

第1個格仔的圖為沿x軸方向傾斜45度

第3個格仔的圖為沿y軸方向傾斜45度

沿哪個方向傾斜，哪個方向的座標就會改變，比如沿x軸傾斜，x座標改變，y座標不變，上圖的原始碼如下：

5.小結在運用平移，縮放和旋轉這些變換組合時，要遵循乙個先後原則：平移-->縮放-->旋轉-->傾斜，如果順序不對，有時候調整就會很麻煩，往往看這座標沒問題就是不知道飛**去了，看不到影子。

svg還有不少有趣和實用的功能，敬請期待下篇。

本篇涉及的svg原始碼：svg_demo.zip

Svg學這些就夠了 transform（二）

ES6這些就夠了

ES6這些就夠了

Git知道這些命令就夠了

Svg學這些就夠了 transform（二）

ES6這些就夠了

ES6這些就夠了

Git知道這些命令就夠了

相關推薦