SVG 轉換在SVG圖像中創建的形狀。例如，移動，縮放和旋轉形狀。這是顯示垂直或對角線文本的便捷方法。
一、轉換簡單示例
例：
<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>運行效果：
注：
元素的transform 和 的transform屬性。
該屬性指定要應用於形狀的變換。在此示例中，應用了平移和旋轉。兩者都將在本文後面解釋。
二、哪些元素可以轉換？
可以將變換應用於所有SVG形狀。還可以將變換應用於 元素，從而一次性有效地變換整個元素組。也可以變換漸變和填充圖案。
三、轉換函數
轉換函數不會自行轉換SVG形狀，而是會轉換該形狀的基礎座標系。因此，即使寬度以倍數顯示，寬度20乘以2的形狀在邏輯上仍具有20的寬度。
1. 移動 translate()
translate()函數移動形狀。將x 和 y 值傳遞給translate()的函數。
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. 旋轉 rotate()
rotate()函數圍繞點0,0旋轉形狀。
顯示一個矩形（輪廓）和旋轉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以外的其他點旋轉，則將該點的x和y座標傳遞給transform函數。
顯示了一個非旋轉的矩形（輪廓）和一個相等的矩形（實心）圍繞其中心旋轉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>運行效果：
所有旋轉都是順時針旋轉，其度數從0到360。如果要逆時針旋轉，請將負的度數傳遞給rotate()函數。
3. 縮放 scale()
3.1 scale()函數簡介
scale()函數按比例放大或縮小形狀。scale()函數可縮放形狀尺寸及其位置座標。因此，以20乘以2的比例縮放的寬度為20且高度為30的矩形位於20,20處，其寬度為40且高度為60。
scale()函數還可以縮放形狀的筆觸寬度。
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()函數提供x-scale和y-scale參數。
如下所示：
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>運行效果：
注意：
縮放後的矩形（黑色）的筆劃寬度也是如何縮放的，並且在x軸和y軸上的縮放比例不同。
4. 偏斜 skew()
skewX()和skewY()函數偏斜x軸和y軸。實際上，這些函數會根據以度為單位指定的某個角度來傾斜給定的軸。
顯示具有不同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()函數使垂直線看起來像是按給定角度旋轉了。
因此，skewY()函數使水平線看起來像是旋轉了給定角度。
例：
<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>四、總結
本文基於HTML基礎，介紹了圖像的轉換。詳細的介紹瞭如何運用轉換函數，進行圖像移動、縮放、轉動、拉長或拉伸等一系列操作。通過案例的分析，豐富的效果圖，能夠讓讀者更好的理解。
希望能夠幫助你更好的理解SVG中圖像轉換。
想學習更多前端、Python爬蟲、大數據等計算機知識，請前往：http://pdcfighting.com/