視野和世界
2D繪圖中很多人會有一個誤區,就是我繪圖的區域是一個矩形區域。無論新建一個畫布還是創建了一個容器,心里都想象里面有一個矩形區域。其實,在SVG當中,矩形區域只是視野,是我們看到的部分。實際上你能繪制的區域是一個無窮大的世界。
世界是客觀地,只要定義了世界的內容,那么內容就是確定的。視野是主觀地,大部分繪圖API都提供視野的控制方法.在SVG中
viewbox用來控制視野.
SVG中的世界是無窮大的,視野(viewbox)是觀察世界的一個矩形區域.
上圖中svg世界中有2個矩形,但是在當前的視野中我們只能看到一個綠色的矩形,改變視野我們可以看到世界中的紫色的矩形,如下圖:
svg元素中可以指定寬高屬性,表示SVG文件渲染的大小(大小也可以通過樣式表來定義),這個區域的大小也就是視窗.視窗是瀏覽器開辟的用來渲染SVG內容的一個區域,可能根據樣式上下文改變.
在 SVG 當中,里面的內容就是對 SVG 世界的定義,這個 SVG 文文件里面有多少個矩形多少條曲線,在哪里,什么顏色,都是在定義世界。
而視野,也就是觀看世界的矩形區域是一個,使用用 viewBox 進行定義。
這里出現了視窗和視野,在理想情況下,視野和視窗有一樣的尺寸,那瀏覽器就可以地把視野完美地填充到視窗內。可是如果視窗和視野大小不一致,就存在如何控制這個
填充的問題,填充的策略使用preserveAspectRatio進行指定,該屬性定義了顯示的寬高比。
坐標系統和坐標變換
SVG中的圖形分組
使用
<g>標簽來創建分組(組內的元素可以看做是一個整體)組內的標簽繼承屬性
使用
transform屬性定義坐標變換,可以最組內的元素進行整體變換組可以嵌套
在上述的示例圖中我們看到了2個坐標系.接下來我們來看一下SVG中的坐標系統:
SVG使用的是笛卡爾坐標系.該坐標系定義了一個原點和2條相互垂直的數軸.基於原點和數軸可以定義角度分.角度的正方向是從x軸的正方向到y軸的正方向,所以在瀏覽器平面上角度是順時針方向.
SVG中的坐標系可以分為以下的4類:
User Coordinate:用戶坐標系,世界的坐標系
Current Coordinate:自身坐標系,每個元素或者分組自己與生俱來
Previous Coordinate:前驅坐標系,父容器的坐標系
Reference Coordinate:參考坐標系,使用其它坐標系來考究自身的情況時使用
坐標變換指的是從一個坐標系統到另一個坐標系統.變換分為以下的幾種:
