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

世有因果知因求果發表於2017-07-27
SVGORMView

本文翻譯自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座標系統是相等同的。

 

相關文章