SVG中的座標系統和座標變換

視野和世界

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:參考座標系,使用其它座標系來考究自身的狀況時使用

座標變換指的是從一個座標系統到另外一個座標系統.變換分爲如下的幾種: