SVG轉(zhuǎn)換在SVG圖像中創(chuàng)建的形狀

2021-01-11 11:57

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

一、轉(zhuǎ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＞

運行效果：

注：

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

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

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

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

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

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

1．移動 translate（）

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

translate（50，25）

將形狀沿x軸移動50個單位，并沿y軸移動25個單位。顯示了兩個位置相等且大小相等的形狀，有無平移。

例：

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

運行效果：

注

與第一個（紅色）形狀相比，第二個（藍色）形狀沿x軸移動75個單位，沿y軸移動25個單位。

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

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

顯示一個矩形（輪廓）和旋轉(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）＂＞＜／rect＞＜／svg＞

運行效果：

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

顯示了一個非旋轉(zhuǎn)的矩形（輪廓）和一個相等的矩形（實心）圍繞其中心旋轉(zhuǎn)15度。

例：

運行效果：

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

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

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

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

3．2 案例

顯示了一個位于10，0處，寬度為20且高度為20的矩形（藍色），以及一個等比例的矩形（黑色），其縮放比例為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＞

運行效果：

注意

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

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

如下所示：

scale（2，3）；

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

例：

運行效果：

注意：

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

4．偏斜 skew（）

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

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

運行效果：

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＞

四、總結(jié)

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