基本變換

現在我們準備開始扭曲美麗的影像。但首先，讓我們正式介紹一下 <g> 元素。有了這個助手，你可以為一組完整的元素分配屬性。實際上，這就是它的唯一目的。

示例

html
<svg width="30" height="10">
  <g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
  </g>
</svg>

所有以下轉換都彙總在元素的 transform 屬性中。轉換可以透過將它們連線起來，用空格隔開來進行鏈式操作。

翻譯

可能需要移動一個元素，即使你可以使用相應的屬性對其進行定位。為此，translate() 轉換已經準備就緒。

html
<svg width="40" height="50" style="background-color:#bff;">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

此示例將呈現一個矩形，將其從 (0,0) 翻譯到點 (30,40)。

如果沒有給出第二個值，則假定為 0。

旋轉

旋轉元素是一項非常常見的任務。為此，請使用 rotate() 轉換

html
<svg width="31" height="31">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>

此示例顯示了一個旋轉 45 度的正方形。rotate() 的值為度數。

多個變換

轉換可以透過簡單的空格分隔來進行連線。例如，translate() 和 rotate() 是常用的轉換。

html
<svg width="40" height="50" style="background-color:#bff;">
  <rect
    x="0"
    y="0"
    width="10"
    height="10"
    transform="translate(30,40) rotate(45)" />
</svg>

此示例再次顯示了上面顯示的小正方形，這次它還旋轉了 45 度。

傾斜

要從矩形中建立菱形，可以使用 skewX() 和 skewY() 轉換。每個轉換都接受一個角度，該角度決定元素將傾斜的程度。

縮放

scale() 改變元素的大小。它接受兩個數字，第一個是 x 比例因子，第二個是 y 比例因子。這些因子作為轉換後的尺寸與原始尺寸的比率來取。例如，0.5 收縮 50%。如果省略第二個數字，則假定它等於第一個。

使用 matrix() 進行復雜變換

所有上述轉換都可以用 2x3 變換矩陣來表示。要組合多個轉換，可以使用 matrix(a, b, c, d, e, f) 轉換直接設定結果矩陣，該轉換透過以下方式將座標從以前的座標系對映到新的座標系

{ x newCoordSys = a x prevCoordSys + c y prevCoordSys + e y newCoordSys = b x prevCoordSys + d y prevCoordSys + f \left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

請參見 SVG 轉換文件中的具體示例。有關此屬性的詳細資訊，請參見 SVG 建議。

對座標系的影響

使用轉換時，你將在應用轉換的元素內部建立一個新的座標系。這意味著你為元素及其子元素指定的單位可能不遵循 1:1 畫素對映，而是根據轉換進行扭曲、傾斜、平移和縮放。

html
<svg width="100" height="100">
  <g transform="scale(2)">
    <rect width="50" height="50" />
  </g>
</svg>

上面示例中生成的矩形將為 100x100px。當你依賴 userSpaceOnUse 等屬性時，會產生更有趣的效果。

在 SVG 中嵌入 SVG

與 HTML 相比，SVG 允許你無縫地嵌入其他 svg 元素。這樣你也可以透過利用內部 svg 元素的 viewBox、width 和 height 來建立新的座標系。

html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>

上面的示例基本上與上面的示例具有相同的效果，即矩形將是指定大小的兩倍。