坐標系統
SVG存在兩套坐標系統：視窗坐標系與用戶坐標系。默認情況下，用戶坐標系與視窗坐標系的點是一一對應的，都為原點在視窗的左上角，x軸水平向右，y軸豎直向下；如下圖所示： 

SVG的視窗位置一般是由CSS指定，尺寸由SVG元素的屬性width和height設置，但是如果SVG是存儲在embedded對象中(例如object元素，或者其他SVG元素)，而且包含SVG的文檔是用CSS或者XSL格式化的，并且這些外圍對象的CSS或者其他指定尺寸的值已經可以計算出視窗的尺寸了，則此時會使用外圍對象的尺寸。

這里需要區分視窗，視窗坐標系，用戶坐標系的概念：

視窗：指的是網頁上面可視的矩形局域，長度和寬度都是有限的，這個區域一般與外圍對象的尺寸有關。

視窗坐標系：本質是一個坐標系，有原點，x軸與y軸；而且在兩個方向上是無限延伸的。默認情況下，原點在視窗的左上角，x軸水平向右，y軸豎直向下。可以對這個坐標系的點進行變換。

用戶坐標系：本質是一個坐標系，有原點，x軸與y軸；而且在兩個方向上是無限延伸的。默認情況下，原點在視窗的左上角，x軸水平向右，y軸豎直向下。可以對這個坐標系的點進行變換。

默認情況下，視窗坐標系與用戶坐標系是重合的，但是這里需要注意，視窗坐標系屬于的是創建視窗的元素，視窗坐標系確定好以后，整個視窗的坐標基調就確定了。但是用戶坐標系是屬于每個圖形元素的，只要圖形進行了坐標變換，就會創建新的用戶坐標系，這個元素中所有的坐標和尺寸都使用這個新的用戶坐標系。

簡單點說：視窗坐標系描述了視窗中所有元素的初始坐標概況，用戶坐標系描述了每個元素的坐標概況，默認情況下，所有元素都使用默認的與視窗坐標系重合的那個用戶坐標系。

坐標空間變換
讓我們回顧一下canvas用戶坐標的變換，它們是通過平移，縮放，旋轉函數實現的；每次變換后對以后繪制的圖形都起作用，除非再次進行變換，這是"當前"用戶坐標系統的概念。canvas只有唯一一個用戶坐標系。
在SVG中，情況完全不同。SVG本身作為一種向量圖元素，它的兩個坐標系統本質上都可以算作"用戶坐標系統"；SVG的兩個坐標空間都是可以變換的：視窗空間變換和用戶空間變換。視窗空間變換由相關元素(這些元素創建了新的視窗)的屬性viewBox控制；用戶空間變換由圖形元素的transform屬性控制。視窗空間變換應用于對應的整個視窗，用戶空間變換應用于當前元素及其子元素。

視窗變換 - viewBox屬性

所有的能建立一個視窗的元素(看下一節)，再加上marker,pattern,view元素，都有一個viewBox屬性。

viewBox屬性值的格式為(x0,y0,u_width,u_height)，每個值之間用逗號或者空格隔開，它們共同確定了視窗顯示的區域：視窗左上角坐標設為(x0,y0)、視窗的寬設為u_width，高為u_height；這個變換對整個視窗都起作用。

這里一定不要混淆：視窗的大小和位置已經由創建視窗的元素和外圍的元素共同確定了(例如最外層的svg元素建立的視窗由CSS，width和height確定)，這里的viewBox其實是設置這個確定的區域能顯示視窗坐標系的哪個部分。
viewBox的設置其實是包含了視窗空間的縮放和平移兩種變換。

變換的計算也很簡單：以最外層的svg元素的視窗為例，假設svg的寬與長設置為width,height，viewBox的設置為(x0,y0,u_width,u_height)。則繪制的圖形，寬和高的縮放比例分別為：width/u_width, height/u_height。視窗的左上角的坐標設置為了(x0,y0)。

體會下面幾種代碼繪出的結果的不同：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表