SVG 轉(zhuǎn)換在SVG圖像中創(chuàng)建的形狀。例如，移動(dòng)，縮放和旋轉(zhuǎn)形狀。這是顯示垂直或?qū)�角線文本的便捷方法。

一、轉(zhuǎn)換簡(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）＂   ＞nhooo．com＜／text＞＜／svg＞

運(yùn)行效果：

注：

＜rect＞元素的transform 和 ＜text＞的transform屬性。

該屬性指定要應(yīng)用于形狀的變換。在此示例中，應(yīng)用了平移和旋轉(zhuǎn)。兩者都將在本文后面解釋。

二、哪些元素可以轉(zhuǎn)換？

可以將變換應(yīng)用于所有SVG形狀。還可以將變換應(yīng)用于＜g＞   元素，從而一次性有效地變換整個(gè)元素組。也可以變換漸變和填充圖案。

三、轉(zhuǎn)換函數(shù)

轉(zhuǎn)換函數(shù)不會(huì)自行轉(zhuǎn)換SVG形狀，而是會(huì)轉(zhuǎn)換該形狀的基礎(chǔ)坐標(biāo)系。因此，即使寬度以倍數(shù)顯示，寬度20乘以2的形狀在邏輯上仍具有20的寬度。

1． 移動(dòng) translate（）

translate（）函數(shù)移動(dòng)形狀。將x 和 y 值傳遞給translate（）的函數(shù)。

translate（50，25）

將形狀沿x軸移動(dòng)50個(gè)單位，并沿y軸移動(dòng)25個(gè)單位。顯示了兩個(gè)位置相等且大小相等的形狀，有無(wú)平移。

例：

＜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＞

運(yùn)行效果：

注

與第一個(gè)（紅色）形狀相比，第二個(gè)（藍(lán)色）形狀沿x軸移動(dòng)75個(gè)單位，沿y軸移動(dòng)25個(gè)單位。

2． 旋轉(zhuǎn) rotate（）

rotate（）函數(shù)圍繞點(diǎn)0，0旋轉(zhuǎn)形狀。

顯示一個(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＞

運(yùn)行效果：

如果要繞除0，0以外的其他點(diǎn)旋轉(zhuǎn)，則將該點(diǎn)的x和y坐標(biāo)傳遞給transform函數(shù)。

顯示了一個(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＞

運(yùn)行效果：

所有旋轉(zhuǎn)都是順時(shí)針旋轉(zhuǎn)，其度數(shù)從0到360。如果要逆時(shí)針旋轉(zhuǎn)，請(qǐng)將負(fù)的度數(shù)傳遞給rotate（）函數(shù)。

3． 縮放 scale（）3．1 scale（）函數(shù)簡(jiǎn)介

scale（）函數(shù)按比例放大或縮小形狀。scale（）函數(shù)可縮放形狀尺寸及其位置坐標(biāo)。因此，以20乘以2的比例縮放的寬度為20且高度為30的矩形位于20，20處，其寬度為40且高度為60。

scale（）函數(shù)還可以縮放形狀的筆觸寬度。

3．2 案例

顯示了一個(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＞

運(yùn)行效果：

注意

矩形的位置和大小是如何縮放的。

可以在x軸和y軸上按其他因子縮放形狀。為此，可以向scale（）函數(shù)提供x－scale和y－scale參數(shù)。

如下所示：

scale（2，3）；

將沿x軸將形狀縮放2倍，沿y軸將形狀縮放3倍。

例：

＜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＞

運(yùn)行效果：

注意：

縮放后的矩形（黑色）的筆劃寬度也是如何縮放的，并且在x軸和y軸上的縮放比例不同。

4． 偏斜 skew（）

skewX（）和skewY（）函數(shù)偏斜x軸和y軸。實(shí)際上，這些函數(shù)會(huì)根據(jù)以度為單位指定的某個(gè)角度來(lái)傾斜給定的軸。

顯示具有不同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＞

運(yùn)行效果：

skewX（）函數(shù)使垂直線看起來(lái)像是按給定角度旋轉(zhuǎn)了。

因此，skewY（）函數(shù)使水平線看起來(lái)像是旋轉(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＞

四、總結(jié)

本文基于HTML基礎(chǔ)，介紹了圖像的轉(zhuǎn)換。詳細(xì)的介紹了如何運(yùn)用轉(zhuǎn)換函數(shù)，進(jìn)行圖像移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸等一系列操作。通過(guò)案例的分析，豐富的效果圖，能夠讓讀者更好的理解。