svg transform 坐标变换方式

时间:2022-02-26 10:21:31

坐标变换的使用方式:

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