SVG 轉(zhuǎn)換在SVG圖像中創(chuàng)建的形狀。例如，移動(dòng)，縮放和旋轉(zhuǎn)形狀。這是顯示垂直或?qū)蔷€文本的便捷方法。
這是一個(gè)簡(jiǎn)單的示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)" > </rect> <text x="70" y="100" transform="translate(30) rotate(45 50 50)" >(cainiaoplus.com)</text> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
注意<rect>元素的transform 和 <text>的transform屬性。該屬性指定要應(yīng)用于形狀的變換。在此示例中，應(yīng)用了平移和旋轉(zhuǎn)。兩者都將在本文后面解釋。
您可以將變換應(yīng)用于所有SVG形狀。您還可以將變換應(yīng)用于<g>
元素，從而一次性有效地變換整個(gè)元素組。也可以變換漸變和填充圖案。
SVG提供四種轉(zhuǎn)換函數(shù)：
translate()
rotate()
scale()
skew()
matrix()
以下各節(jié)將對(duì)這些函數(shù)中的每一個(gè)進(jìn)行更詳細(xì)的說明。
實(shí)際上，轉(zhuǎn)換函數(shù)不會(huì)自行轉(zhuǎn)換SVG形狀，而是會(huì)轉(zhuǎn)換該形狀的基礎(chǔ)坐標(biāo)系。因此，即使寬度以倍數(shù)顯示，寬度20乘以2的形狀在邏輯上仍具有20的寬度。
translate()函數(shù)移動(dòng)形狀。您將x 和 y 值傳遞給translate()的函數(shù)。這是一個(gè)示例：
translate(50,25)
本示例將形狀沿x軸移動(dòng)50個(gè)單位，并沿y軸移動(dòng)25個(gè)單位。
這是一個(gè)示例，顯示了兩個(gè)位置相等且大小相等的形狀，有無平移：
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)"></rect> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
請(qǐng)注意，與第一個(gè)（紅色）形狀相比，第二個(gè)（藍(lán)色）形狀沿x軸移動(dòng)75個(gè)單位，沿y軸移動(dòng)25個(gè)單位。
rotate()函數(shù)圍繞點(diǎn)0,0旋轉(zhuǎn)形狀。這是一個(gè)示例，顯示一個(gè)矩形（輪廓）和旋轉(zhuǎn)15度后的相等矩形（實(shí)心）：
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)" ></rect> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
如果要繞除0,0以外的其他點(diǎn)旋轉(zhuǎn)，則將該點(diǎn)的x和y坐標(biāo)傳遞給transform函數(shù)。這是一個(gè)示例，顯示了一個(gè)非旋轉(zhuǎn)的矩形（輪廓）和一個(gè)相等的矩形（實(shí)心）圍繞其中心旋轉(zhuǎn)15度：
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15, 40, 40)" ></rect> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
所有旋轉(zhuǎn)都是順時(shí)針旋轉(zhuǎn)，其度數(shù)從0到360。如果要逆時(shí)針旋轉(zhuǎn)，請(qǐng)將負(fù)的度數(shù)傳遞給rotate()函數(shù)。
scale()函數(shù)按比例放大或縮小形狀。scale()函數(shù)可縮放形狀尺寸及其位置坐標(biāo)。因此，以20乘以2的比例縮放的寬度為20且高度為30的矩形位于20,20處，其寬度為40且高度為60。
scale()函數(shù)還可以縮放形狀的筆觸寬度。
這是一個(gè)示例，顯示了一個(gè)位于10,0處，寬度為20且高度為20的矩形（藍(lán)色），以及一個(gè)等比例的矩形（黑色），其縮放比例為2：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"></rect> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
注意矩形的位置和大小是如何縮放的。
您可以在x軸和y軸上按其他因子縮放形狀。為此，您可以向scale()函數(shù)提供x-scale和y-scale參數(shù)，如下所示：
scale(2,3);
本示例將沿x軸將形狀縮放2倍，沿y軸將形狀縮放3倍。這是一個(gè)示例：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)"></rect> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
請(qǐng)注意，縮放后的矩形（黑色）的筆劃寬度也是如何縮放的，并且在x軸和y軸上的縮放比例不同。
scale()通過沿x軸或y軸按-1縮放比例，
可以將該函數(shù)用作鏡像函數(shù)。完成后，您必須先在x或y方向上移動(dòng)（平移）該形狀，否則鏡像的形狀將出現(xiàn)在SVG畫布的外部。
這是一個(gè)示例：
<svg width="500" height="150"> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #3333cc; fill:none;" /> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #000000; fill:none;" transform="translate(100, 0) scale(-1, 1) " /></svg>測(cè)試看看?/?
這是在x = 100處繪制的線條的結(jié)果圖像（因?yàn)榫匦卧趚方向上平移了100）。
藍(lán)色是原始形狀。黑色形狀是平移的縮放比例形狀。
skewX()和skewY()函數(shù)偏斜x軸和y軸。實(shí)際上，這些函數(shù)會(huì)根據(jù)以度為單位指定的某個(gè)角度來傾斜給定的軸。
以下是顯示具有不同skewX()值的矩形的一些示例。
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" /></svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
正如您看到的，skewX()函數(shù)使垂直線看起來像是按給定角度旋轉(zhuǎn)了。因此，skewY()函數(shù)使水平線看起來像是旋轉(zhuǎn)了給定角度。這里有一些示例：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" /></svg>測(cè)試看看?/?
也可以將轉(zhuǎn)換表示為矩陣。矩陣如下所示：
a c e b d f 0 0 1
由于只能指定前6個(gè)值，因此只能為矩陣轉(zhuǎn)換函數(shù)提供6個(gè)值。這是一個(gè)示例：
transform="matrix(a,b,c,d,e,f)"
其他變換函數(shù)可以表示為矩陣。這里有些示例：
Translate 1 0 tx 0 1 ty 0 0 1 matrix(1,0,0,1,tx,ty)
Rotate cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
注：該值cos(a)和sin(a)具有插入基質(zhì)之前預(yù)先計(jì)算。該參數(shù)a是旋轉(zhuǎn)角度。
Scale sx 0 0 0 sy 0 0 0 1 matrix(sx,0,0,sy,0,0)
沿x軸的偏斜變換可以寫為：
Skew 1 tan(a) 0 0 1 0 0 0 1 matrix(1,0,tan(a),1,0,0)
tan(a)值在插入matrix()函數(shù)之前必須預(yù)先計(jì)算。
沿y軸的偏斜變換可以表示為：
Skew 1 0 0 tan(a) 1 0 0 0 1 matrix(1,tan(a),0,1,0,0)
這是一個(gè)模仿簡(jiǎn)單轉(zhuǎn)換功能的SVG矩陣轉(zhuǎn)換示例：
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="matrix(1,0,0,1,100,20)" /> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
請(qǐng)注意，與左側(cè)（紅色）矩形相比，右側(cè)矩形（藍(lán)色）如何轉(zhuǎn)換。
可以組合轉(zhuǎn)換。您可以通過在transform屬性內(nèi)放置多個(gè)轉(zhuǎn)換函數(shù)來實(shí)現(xiàn)。
這是一個(gè)首先平移（移動(dòng)）然后旋轉(zhuǎn)矩形的示例。該示例顯示了在應(yīng)用任何變換之前和之后（黑色）的矩形（藍(lán)色）。
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(50,0) rotate(30)" /> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
轉(zhuǎn)換的順序很重要。在transform屬性內(nèi)指定變換函數(shù)的順序是它們應(yīng)用于形狀的順序。
以下示例說明了先平移然后旋轉(zhuǎn)，再先旋轉(zhuǎn)然后平移形狀之間的區(qū)別：
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; stroke-width: 2px; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; stroke-width: 2px; fill:none;" transform="translate(100,0) rotate(45)" /> <rect x="50" y="10" width="20" height="30" style="stroke: #cc3333; stroke-width: 2px; fill:none;" transform="rotate(45) translate(100,0)" /> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
黑色矩形未應(yīng)用任何轉(zhuǎn)換。首先平移藍(lán)色矩形，然后旋轉(zhuǎn)。首先旋轉(zhuǎn)紅色矩形，然后平移。