在 SVG 繪製的任何一個時間點，我們都可以透過內嵌 <svg> 或者使用像是 <symbol> 這類的元素來建立新的 viewport 和用戶座標。
本篇文章我們將要探討該怎麼作？以及如何利用這種方式協助我們控制 SVG 元素使其更具彈性。

本篇是探討 SVG 座標系與變形系列文章的第三篇也是最後一篇，在第一篇我們討論了 SVG 座標系的基本觀念即 viewport viewBox preserveAspectRatio 這三個東西。第二篇主要討論了關於變形的用法和座標系之間關係的觀念。系列文章的連結條例於下：

• [譯] 理解 SVG 座標系統與 Transformation - 1 viewport、viewBox、和 preserveAspectRatio
• [譯] 理解 SVG 座標系統與 Transformation - 2 transform 屬性
• [譯] 理解 SVG 座標系統與 Transformation - 3 建立 viewport

在這篇文章中，我假設您至少已經讀完第一篇文章，並且能夠掌握 SVG viewport 的觀念和 viewBox preserveAspectRatio 兩個屬性。本篇文章不需要具備第二篇討論的觀念，您可以略過無妨。

SVG 的元素可以執行縮放、移動、傾斜、旋轉等形變效果就像 HTML 元素可以用 CSS transform 一樣。然而當變形的任務牽扯到座標時，勢必也會影響結果。
在這篇文章我們要討論的是 SVG 的 transform 屬性與 CSS 屬性，內容涵蓋如何操作 SVG 變形以及座標系轉換過程您應該知道的事。

這是系列文章的第二篇，我們將開始探討 SVG 座標系與變形之間的關係。在第一篇時我們介紹了關於 SVG 座標系的基礎概念，更具體的說就是 viewBox， preserveAspectRatio 屬性和 viewport 的概念。

• [譯] 理解 SVG 座標系統與 Transformation - 1 viewport、viewBox、和 preserveAspectRatio
• [譯] 理解 SVG 座標系統與 Transformation - 2 transform 屬性
• [譯] 理解 SVG 座標系統與 Transformation - 3 建立 viewport

這裡我假設您已經閱讀並理解第一篇的部分，如果您還沒參透那麼這邊建議您先讀完第一篇。

SVG 元素並不像其他 HTML 元素受到 CSS 盒模型的管轄。乍看之下元素的定位、變形、移動、旋轉等形變的行為並不是那麼直覺好控制。
然而只要我們理解關於 SVG 的座標系與圖案變形(transformation)是如何運作，控制 SVG 就會變得非常容易。

在這篇文章我們要討論 SVG 中最重要的 1 個觀念和 2 個屬性 ，它們控制了 SVG 座標系統：viewport、viewBox、preserveAspectRatio。

我們將探討 SVG 的座標系統和 Transformations ，這系列文章將會包含下列 3 篇

• [譯] 理解 SVG 座標系統與 Transformation - 1 viewport、viewBox、和 preserveAspectRatio
• [譯] 理解 SVG 座標系統與 Transformation - 2 transform 屬性
• [譯] 理解 SVG 座標系統與 Transformation - 3 建立 viewport