SVG座標系統和transformation徹底理解

世有因果知因求果發表於2017-04-24
SVGORM

翻譯自https://sarasoueidan.com/blog/svg-coordinate-systems/

SVG元素不像傳統的HTML elements一樣受制於css box model。這就使得position或者transform這些svg元素有些不是很直觀.然而，一旦我們理解了SVG座標體系和transformation是怎麼工作的，那麼操作svg就變得容易起來。本文試圖解析SVG最重要的控制SVG座標體系的三個屬性: viewport, viewBox, preserveAspectRatio

SVG Canvas

canvas就是SVG內容呈現的舞臺。概念上說，這個canvas在x,y方向是無限的，也就是說SVG可以是無線大尺寸的。然而，SVG內容只能渲染在相對於有限的一個區域，這個區域我們稱之為viewport.所有沒有落在這個viewport區域內的內容都將不可見。

the viewport

正如上面所說，viewport就是SVG可視的部分割槽域。你可以想象成viewport為一個視窗，通過這個視窗我們可以看到後面佈景的部分內容。佈景(scene)通過這個viewport可能全部或者部分可見。

SVG viewport和瀏覽器的viewport是類似的概念。一個web page可以是任何此存，他可以比browser viewport寬也可以長一些。

到底SVG內容是全部可見還是部分可見，這個取決於canvas的次寸大小以及preserveAspectRatio屬性值。關於這一點後面還會繼續研究。

你通過設定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體系中，values設定時可以帶單位也可以不帶unit單位。如果沒有帶單位意味著使用user space using user units.

待續...

相關文章