SVG座標系統學習筆記

文章是閱讀下面三篇關於SVG座標和轉化的文章的學習筆記, 重點學習了第一部分.

• part1: The viewport, viewBox, and preserveAspectRatio
• part2: The transform Attribute
• part3: Establishing New Viewports

---

part1: The viewport, viewBox, and preserveAspectRatio

SVG畫布（svg canvas）

理論上講，SVG畫布在X軸，Y軸上能夠無限的延伸，也就是說能夠畫出任意大小的SVG圖形。可是在瀏覽器中只能渲染（render）到有限的視口（viewport）中，超過視口邊界的部分會被減去（clipped off）從而不能在瀏覽器中看到。

viewport

viewport規定了SVG圖形能夠看到的區域，於此同時畫布的大小（size of canvas）以及preserveAspectRatio決定了用戶經過viewport看到的是整幅畫布，仍是部分畫布。

經過設置SVG的width和height屬性能夠設定viewport，也就是用戶能夠看到的畫布的寬度和高度。當設定了寬度和高度後，瀏覽器也就創建了初始的視口座標系統（initial viewport coordinate system）和用戶座標系統（initial user coordinate system）。

初始座標系統

初始的座標系統中包含兩套座標系統：

• 初始的視口座標系統： 創建在viewport基礎上（a coordinate system established on the viewport），原點在左上方的（0,0）座標。x值在x軸上越向右越大，y值在y軸上越向下越大。

• 初始的用戶座標系統：創建在SVG畫布基礎上（the coordinate system established on the SVG canvas），初始的用戶座標系統和初始的視口座標系統相同（This coordinate system is initially identical to the viewport coordinate system）。

能夠經過使用viewBox屬性來使得初始的用戶座標系統和初始的視口座標系統不相同，使用viewBox設置的座標系統被稱做「當前座標系統」或者「正在使用的用戶空間」。此外，還可使用transform屬性來建立新的「用戶空間」或者是「座標系統」。

viewBox

關於viewBox有如下幾點須要注意：

• 能夠將viewBox改變的座標系統認爲是「實際的座標系統（real coordinate system）」，由於用戶正是經過使用這套座標系統將SVG圖形繪製到SVG畫布上的。

• 若是沒有指定viewBox屬性的話，那麼默認其值爲「0 0 width height」，也就是說生成的初始的用戶座標系統和視口座標系統相同。
• 用戶能夠經過使用該屬性來構建本身的用戶座標系統。若是用戶構建的座標系統和視口座標系統的縱橫比（aspect ratio）不同的話，能夠經過使用preserveAspectRatio屬性來指定是否將整個系統顯示在視口中，或者是指定圖形在視口的位置。
• 使用viewBox須要指定四個值<min-x> <min-y> width height, <min-x>和<min-y>定義了用戶自定義座標系統的左上角（determine the upper left corner of the viewbox），width和height分別指定了用戶自定義座標系統的寬度和高度。
• 能夠經過使用viewBox來縮放（scale）、移動（translate）SVG圖案。甚至能夠經過viewBox來剪切（crop）SVG圖案。

下面是關於viewBox的實例：

• 自定義viewBox，和viewport具備相同的縱橫比

<svg width="800" height="600" viewbox="0 0 400 300">
    <!-- SVG content drawn onto the SVG canvas -->
</svg>

生成該SVG圖形的過程是這樣子的：

1. 截取從（0,0）到（400,300）的一塊區域。
2. 被截取的區域放大（scale up）來鋪滿整個視口
3. 用戶座標系統爲從（0,0）到（400,300），而視口座標系統爲從（0,0）到（800,600）。於是，用戶座標系統中的一個單元至關於視口座標系統中兩個單元。

值得說的是咱們這裏<min-x>，<min-y>使用了0,0，若是非0,0的話至關於在0,0的基礎之上進行了translate(-<min-x>, -<min-y>)處理，能夠從下圖中體會。 viewBox="100 100 200 150" viewBox="-100 -100 400 300"

上面兩個例子都是viewBox的width和height都小於viewport的width和height並保持縱橫比，來看一個width和height都大於viewport的width和height並保持縱橫比的例子。 viewbox="0 0 1200 900"

關於viewBox的總結

On one hand, unlike the transform attribute, the automatic transformation that is created due to a viewBox does not affect the x, y, width and height attributes on the element with the viewBox attribute. Thus, in the example above which shows an svg element which has attributes width, height and viewBox, the width and height attributes represent values in the coordinate system that exists before the viewBox transformation is applied. You can see this in the above examples as the initial (grey) viewport coordinate system remains unaffected even after using the viewBox attribute on the <svg>. 翻譯---->: 一方面，viewBox效果不一樣於transform的效果，這是因爲viewBox引發的自動轉換不會影響x,y,width,height。於是，在上面例子中width和height屬性表示在使用viewBox屬性引發的轉換效果以前的座標系統。直接結果就是不管viewBox如何變化初始的視口座標系統使用保持不變。

On the other hand, like the transform attribute, it does establish a new coordinate system for all other attributes and for descendant elements. You can also see that in the above examples as the user coordinate system established is a new one—it does not remain as the initial user coordinate system which was identical to the viewport coordinate system before the viewBox was used. And any descendants of the <svg> will be positioned and sized in the new user coordinate system, not the initial one. 翻譯---->: 另外一方面，與transform屬性同樣，使用viewBox屬性會爲全部的其餘屬性以及SVG後代節點創建一套新的座標系統。於是，上述各例中使用了viewBox後建立的用戶座標系統和初始的視口座標系統不一樣。SVG元素的任何後代節點會根據新建立的用戶座標系統進行位置的擺放和尺寸的展現。

preserveAspectRatio

The preserveAspectRatio attribute allows you to force uniform scaling of the viewbox, while maintaining the aspect ratio, and it allows you to specify how to position the viewbox inside the viewport if you don't want it to be centered by default. 翻譯---->: preserveAspectRatio屬性容許用戶經過保持縱橫比的前提下縮放viewBox的座標系統到viewport，於此同時能夠經過它指定將viewBox座標系統映射到viewport座標系統時的對齊方式，若是不想使用默認的居中對齊的話。

preserveAspectRatio的使用語法以下： preserveAspectRatio = defer? <align> <meetOrSlice>?

defer屬性只在image元素上有效。

對齊方式align有10中，分別爲x，y軸從表示左側、居中和右側對齊的三種規格Min，Mid，Max中各自選擇一種規格。如xMinyMin, xMinyMid, xMinyMax。外加一個none選項，none選項表示不保持viewBox的縱橫比，直接將viewBox縮放到viewport。

meetOrSlice選項規定了是否整個viewBox構造的用戶空間系統都在viewport構造的視口座標系統中可見。默認爲meet，表示保持縱橫比，而且全部的viewBox系統均可以在viewport系統中可見；

part2: The transform Attribute

transform functions

The transform attribute is used to specify one or more transformations on an element. The possible SVG transformations are: rotation, scaling, translation, and skewing. Transform value is defined as a list of transform definitions, which are applied in the order provided. The individual transform definitions are separated by whitespace and/or a comma.

全部的演示都是基於一下代碼爲最初始狀態

<svg width="800" height="600" viewBox="0 0 800 600">
    <g id="parrot">
        <!-- shapes and paths forming the parrot -->
    </g>
    <g id="dog">
        <!-- shapes and paths forming the dog -->
    </g>
</svg>

Translation

translate(<tx> [<ty>])

tx represents the translation value along the x-axis; ty represents the translation value along the y-axis.

The ty value is optional; and, if omitted, it defaults to zero.

<svg width="800" height="800" viewBox="0 0 800 600">
    <g id="parrot" transform="translate(150 200)">
        <!-- shapes and paths forming the parrot -->
    </g>
    <!-- ... -->
</svg>

首先，來看結果圖

其次，新的座標系統圖

最後，總結起來就是說，新創建的座標系統只是原來的座標系統的一個複製，鸚鵡每一個點在新座標系統中的座標同原來在最初始的座標系統中的取值並未發生變化，而且座標系統的範圍一樣未發生變化都是（800,600）。變化的是兩個座標系統的原點位置，新創建的座標原點爲初始座標系統的（150, 200）。

It's important to notice here that the new current coordinate system established on the element is a replicate of the initial user space, with the position of the element preserved inside it. This means that it is not established on the element's bounding box, nor is the size of the new current coordinate system restricted to the size of the element.

Scaling

scale(<sx> [<sy>])

sx represents the scaling value along the x-axis, used to stretch or shrink the element horizontally; sy represents the scaling value along the y-axis, used to stretch or shrink the element vertically.

The sy value is optional; and, if omitted, it is assumed to be equal to sx.

It is important to note here that when an SVG element is scaled, its entire current coordinate system is scaled, resulting in the element also being repositioned inside the viewport.

<svg width="800" height="800" viewBox="0 0 800 600">
    <g id="parrot" transform="scale(2)">
        <!-- shapes and paths forming the parrot -->
    </g>
    <!-- ... -->
</svg>

首先，看最後效果圖

其次，新的座標系統圖

最後，總結起來，鸚鵡每一個點在新座標系統中的座標同原來在最初始的座標系統中的取值一樣並未發生任何變化，而且兩個座標系統的原點在同一位置，變化的是如今的座標系統範圍是（400,300）而原來的是（800,600），新的座標系統中單位長度在原始座標系統中表示兩個單位長度。

Skew

skewX(<skew-angle>)
skewY(<skew-angle>)

The skewX function specifies a skew transformation along the x-axis; and the skewY function specifies a skew transformation along the y-axis.

Rotation

rotate(<rotate-angle> [<cx> <cy>])

Nested and Chained Transformations

When transformations are chained, the most important thing to be aware of is that, just like with HTML element transformations, each transformation is applied to the coordinate system after that system is transformed by the previous transformations.

part3: Establishing New Viewports

未學習...