文章目錄
世界座標系統
即左上角爲座標原點，從座標原點出發從左到右爲x軸正方向，從上到下爲y軸正方向。
最初座標系統
即以SVG畫布的左上角爲座標原點。
用戶座標系統
對於藍色方塊而言，它的座標表示可以用最初座標系統來表示，同時也可以以藍色方塊的左上角作爲原點，那麼藍色方塊的右下角座標就爲(400, 200)。
轉換座標系統
SVG transfrom
SVG元素可以通過縮放，移動，傾斜和旋轉來進行變換，這一點與HTML元素使用CSS的transform來變換相似。
注意，SVG中的transform是一個屬性，是直接寫在標籤上的。語法如下：
<rect x="200" y="100" width="400" height="200" transfrom="translate(100)">
CSS的transfrom也可用於SVG元素，但是IE瀏覽器不支持。
SVG transfrom與CSS transform
相似之處
基本變換類型一致，都包括translate、rotate、scale、skew、matrix。
不同之處
在SVG中，transform的座標變化是相對於畫布左上角進行計算，CSS transform則更加純粹。
且SVG的transform只支持二維變換。
SVG transform translate位移
語法
transform="translate(<tx> [<ty>])"
參數說明
tx：x軸上的位移值ty：y軸上的位移值
注：
ty值是可選的，如果省略，默認值爲0- 當多個參數值時，可以使用逗號，或者直接空格分隔
特別說明
HTML元素的偏移是相對自己的中心點，SVG元素的偏移是相對SVG的左上角。
可以看出，CSS的translate和SVG的translate的原理就完全不同。
CSS是已經存在一個方塊，通過translate將其位移至新位置。而在SVG中則是將最初座標系的座標原點（即SVG左上角）進行位移，而後根據標籤上的定義繪製方塊。