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是新坐标。