轉自：http://xofun.iteye.com/blog/1689597
svg transform 座標變換方式
座標變換的使用方式：代碼:
<g transform="..."> <!--other elements> ...</g>
1、平移變換（translate）
平移表達式transform="translate(x,y)"，即新座標系的原點在原座標系的（x,y）處。座標軸的方向不變。
2、旋轉變換（rotate）
transform="rotate(angle cx,cy)"。angle代表旋轉角度，缺省單位是“度”，瞬時針爲正，逆時針爲負。（cx,cy）是旋轉中心所在的座標。若省略旋轉中心座標，則缺省值是（0,0）。
3、伸縮變換（scale）
transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
4、歪斜變換（skew）
transform="skewX(x-angle)"或transform="skewY(y-angle)"，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。
5、矩陣變換（matrix）
transform="matrix(a b c d e f)"，這裏的六個參數分別是變換矩陣中的六個參數。特點是靈活性大，無論多麼複雜的變換，只需進行一次矩陣運算即可。
二維座標變換基本公式：
x a c e x1
y = b d f * y1
1 0 0 1 1
其中 ，x,y是舊座標，x1,y1是新座標。
在將svg圖形格式轉化爲其它格式圖形的工作中，座標變換是首當其衝的一件工作，下面我們結合svg規範看看svg
是如何處理座標變換的，理解了這些，再將其轉化成你想要的圖形格式的變換方式也就不困難了。
1.svg採用的初始座標系統是視圖座標系，即屏幕左上角爲左邊原點，y軸正方向朝下，x軸正方向朝右
2.The value of the transform attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided.
transform屬性的值是一個變換列表，它們將根據在svg文件中的順序依次起作用。
解析transform值時，一定要根據各個變換出現的順序進行處理，而不能根據變換的類型進行處理。
3.The transform attribute is applied to an element before processing any other coordinate or length values supplied for that element. In the element
<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
the x, y, width and height values are processed after the current coordinate system has been scaled uniformly by a factor of 2 by the transform attribute. Attributes x, y, width and height (and any other attributes or properties) are treated as values in the new user coordinate system, not the previous user coordinate system.
如果一個元素使用了transform屬性，那麼座標變換時首先要處理的就是transform屬性，然後纔是其它的座標
或者長度或高度的值。例如，在
<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
這樣一個元素中，先要把當前的座標系統進行乘2變換後，纔會處理x,y,width和height屬性。x,y,width和height(
還有一些其它與座標有關的屬性)是在新的座標系統終的值，而不再是原來的用戶座標系統中的值。
解析處理元素座標時，首先要處理transform屬性，然後纔是其它屬性。
http://www.neurobot.cn/node/88
需要HTML5 SVG支持的瀏覽器(微軟IE9以上，FireFox12以上，谷歌Chrome19以上，Safari5.1以上，Opera12以上，Android瀏覽器3以上)
0）瀏覽器的默認長度單位是px(pixels)，當然可以明確指定其他的單位，包括em, pt, in, cm, and mm。
通常pixel的座標體系是左上角爲座標系的原點，X軸方向向右，Y軸方向向下。