深刻理解SVG座標體系和transformations- viewport, viewBox,preserveAspectRatio

本文翻譯自blog:

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

SVG元素不像其餘HTML元素同樣受css盒子模型所制約。這個特色致使transform和postioning svg元素顯得有些神祕，而且初看起來不是那麼淺顯易懂。然而，一旦你理解了SVG座標體系以及transformation是如何工做的，那麼操做SVG會變得很是簡單。本文中，咱們將涵蓋控制SVG座標體系的三個方面內容：viewport, viewBox和preserveAspectRatio

這是包含三篇文章系列中的第一篇：

• 理解SVG座標體系和transformations:就是本文
• 理解svg座標體系和transformations: transform屬性
• 理解svg座標體系和transformations: 創建新的viewports

和本文相對應的live demo:

https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/

SVG Canvas

canvas是SVG內容呈現的區域。概念上說，這個canvas在兩個緯度都是無窮大的。也就是說SVG能夠爲任何次寸。然而，SVG內容只能在有限的screen上（這就是一個有限的區域，並被稱爲viewport），也就是viewport上顯示。SVG中落在這個viewport範圍以外的內容將被clipped off而且不可見。

viewport

viewport就是SVG可見的那部分區域。你能夠把viewport想象爲一扇窗戶，經過這個窗戶你可就能夠看到一個特定區域的風景(SVG部份內容).而這個風景(SVG內容)經過這扇窗戶能夠所有或者部分地可見。

SVG viewport和瀏覽器的viewport是相似的。一個web page能夠是任何次寸大小，它能夠比瀏覽器的viewport的寬度大，也能夠比瀏覽器viewport的高度高。然而在同一時刻，咱們只能看到web page的一部分（就是經過這個viewport)

是整個SVG canvas是否可見，仍是僅部分canvas可見這個取決於size of that canvas乘於preserveAspectRation屬性的值

你能夠經過設定最外層的svg元素的width和height屬性來指定這個viewport的次寸大小。

<!-- the viewport will be 800px by 600px -->
<svg width="800" height="600">
    <!-- SVG content drawn onto the SVG canvas -->
</svg>

在SVG概念裏，屬性的值能夠有也能夠沒有對應的單位。A unitless value is said to be specified in user space using user units.若是值被指定爲user units,那麼這個值就假設爲具備"px"單位的值。這意味着上面的例子中咱們就指定了viewport爲800pxX600px的區域。

你也能夠指定對應的單位，在SVG中支持的單位有:em,ex,px,pt,pc,cm,mm,in和百分比。

一旦最外層的SVG元素的width和height被指定了，瀏覽器將會創建一個initial viewport coordinate system和一個initial user coordinate system.

the initial coordinate system

初始的viewport coordinate system是創建在viewport之上的座標體系，從viewport左上角(0,0)點開始，正的x-軸往右生長，

正的y-軸向下生長initial coordinate system中的1個單位等於viewport中的一個"pixel".這個座標體系和經過css盒子模型創建起來的html座標體系是相似的。

the initial user coordinate system則是在SVG canvas上創建起來的座標系統。這個座標系統初始化時是和viewport座標系統是相等同的。