一篇文章帶你瞭解SVG 轉換知識

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>

運行效果：

注：

<rect>元素的transform 和 <text>的transform屬性。

該屬性指定要應用於形狀的變換。在此示例中，應用了平移和旋轉。兩者都將在本文後面解釋。

二、哪些元素可以轉換？

可以將變換應用於所有SVG形狀。還可以將變換應用於<g> 元素，從而一次性有效地變換整個元素組。也可以變換漸變和填充圖案。

三、轉換函數

轉換函數不會自行轉換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中圖像轉換。