[譯] 理解 SVG 座標系統與 Transformation - 3 建立 viewpor

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

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

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

繼續閱讀

[譯] 理解 SVG 座標系統與 Transformation - 2 transform 屬性

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

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

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

繼續閱讀

[譯] 理解 SVG 座標系統與 Transformations - 1

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

在這篇文章我們要討論 SVG 中最重要的 1 個觀念和 2 個屬性 ,它們控制了 SVG 座標系統:viewportviewBoxpreserveAspectRatio

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

繼續閱讀