SVG 变换

简介

SVG 变换使用自带 transform 属性,能放入一个或者多个变换操作;

平移

使用 translate(tx [ty])函数把元素移动一段距离;
tx 和 ty 分别用于表示水平或垂直的位移,ty 是可选的,如果没有表示 ty=0,参数可以使用空格和逗号隔开。

实例:
把矩形从点(0,0)平移到点(30,40)

 <svg version="1.1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="50" height="50" fill="green" transform="translate(30,40)" />
  </svg>

效果:

旋转

使用 rotate(angle [cx cy]) 函数旋转一个元素,其中 angle 是角度,cx和cy是可选的旋转中心点,默认是(0 0);
实例:
把矩形旋转 45 度;

<svg version="1.1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="50" height="50" fill="green" transform="rotate(45)" />
    <rect x="100" y="0" width="50" height="50" fill="red" transform="rotate(45 50 50)" />
</svg>

效果:

倾斜

使用 skewX(angle)skewY(angle) 函数分别沿 x 轴和 y 轴作倾斜操作:
实例:
把矩形分别对 x 轴,y 轴和 xy 轴倾斜45度;

<svg version="1.1" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="50" height="50" fill="green" transform="skewX(45)" />
    <rect x="10" y="20" width="50" height="50" fill="red" transform="skewY(45)" />
    <rect x="10" y="30" width="50" height="50" fill="blue" transform="skewX(45) skewY(45)" />
</svg>

效果:

缩放

scale(sx [sy]) 函数来声明水平和竖直缩放值;
它需要输入一个或两个参数,作为比率计算如何缩放。sx 代表沿 x 轴水平延长或者拉伸元素;sy 代表沿 y 轴垂直延长或者缩放元素;
例如:sx=0.5 表示 x 轴收缩到 50%。如果 没有填写 sy 参数,则默认等于 sx 的值,即 sy=0.5;

实例:
蓝色矩形展示根据绿色矩形的水平和垂直尺寸放大两倍;
红色矩形展示根据绿色矩形的水平放大两倍,垂直缩小一半;

<svg version="1.1" width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="50" height="50" fill="green"/>
    <rect x="30" y="0" width="50" height="50" fill="blue" transform="scale(2)" />
    <rect x="90" y="0" width="50" height="50" fill="red" transform="scale(2 0.5)" />
</svg>

效果:

Matrix

Matrix 变换则是完整的矩阵变换,把这张位图上所有的点都做一次矩阵乘法,得到的新位图;
上面说的平移、平移、拉伸和旋转实际上都是通过矩阵变换得到的;
语法如下:matrix (a,b,c,d,e,f)
a~f这6个参数是表示下面一个矩阵

$$
\left[\begin{array}{ccc}
a&c&e \\
b&d&f \\
0&0&1
\end{array}\right]
$$

转换公式如下:

$$
\left[\begin{array}{ccc}
a&c&e \\
b&d&f \\
0&0&1
\end{array}\right]
\cdot
\left[\begin{array}{ccc}
x \\
y \\
1
\end{array}\right]=
\left[\begin{array}{lll}
&ax+cy+e \\
&bx+dy+f \\
&0+0+1
\end{array}\right]
$$

x, y 表示转换元素的所有坐标;
ax+cy+e = a*x+c*y+1*e,结果是变换后的水平坐标;
bx+dy+f = b*x+d*y+1*f ,结果是变换后的垂直坐标;

matrix 的平移实现
语法:matrix(1, 0, 0, 1, tx, ty),其中 tx,ty 就是表示水平或垂直的位移;
例如我们把一个绿色的矩形移动到 (50,50) 这个点,变成蓝色矩形所在位置:

x' = ax+cy+e = 1*x+0*y+50 = x+50;
y' = bx+dy+f = 0*x+1*y+50 = y+50;
<svg version="1.1" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="50" height="50" fill="green" />
    <rect x="0" y="0" width="50" height="50" fill="blue" transform="matrix(1, 0, 0, 1, 50, 50)" />
</svg>

效果:绿色代表原来的矩形,蓝色代表变换后的矩形

matrix 的旋转实现
语法:matrix(cosθ,sinθ,-sinθ,cosθ,0,0),θ 就是旋转的角度;
根据换算公式得到新坐标的值

x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

实例:把矩形旋转 20 度,变换函数就是 matrix(cos20, sin20, -sin20, cos20, 0, 0)
sin20 约等于 0.34202
cos20 约等于 0.93969

<svg version="1.1" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="50" height="50" fill="green" />
    <rect x="0" y="0" width="50" height="50" fill="blue" transform="matrix(0.93969, 0.34202, -0.34202, 0.93969, 0, 0)" />
</svg>

效果:绿色代表原来的矩形,蓝色代表变换后的矩形

matrix 的倾斜实现
语法:matrix(1,tan(θy),tan(θx),1,0,0),θx和θy就表示x和y轴的倾斜角度;
根据换算公式得到新坐标的值

x' = x+y*tan(θx)+0 = x+y*tan(θx)
y' = x*tan(θy)+y+0 = x*tan(θy)+y

实例:假设 θx=45,θy=60
tan(θx) = tan30 约等于 0.57735
tan(θy) = tan20 约等于 0.36397
变换函数就是 matrix(1, 0.36397, 0.57735, 1, 0, 0)

<svg version="1.1" width="200" height="400" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="50" height="50" fill="green" />
    <rect x="10" y="30" width="50" height="50" fill="blue" transform="matrix(1,0.36397,0.57735,1,0,0)" />
</svg>

效果:绿色代表原来的矩形,蓝色代表变换后的矩形

matrix 的缩放实现
语法:matrix(sx, 0, 0, sy, 0, 0),其中 sx,sy 就是缩放的两个参数;
实例:假设水平放大2倍,垂直缩小一半,变换函数就是 matrix(2, 0, 0, 0.5, 0, 0)
根据换算公式得到新坐标的值

x' = ax+cy+e = sx*x+0*y+0 = sx*x = 2x;
y' = bx+dy+f = 0*x+sy*y+0 = sy*y = 0.5y;
<svg version="1.1" width="150" height="80" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="50" height="50" fill="green" />
    <rect x="0" y="0" width="50" height="50" fill="blue" transform="matrix(2, 0, 0, 0.5, 0, 0)" />
</svg>

效果:绿色代表原来的矩形,蓝色代表变换后的矩形

总结

translate、rotate、skewX 和 scale 函数可以理解为 transform 的傻瓜模式,matrix 则是 transform 的专业模式

留下评论

电子邮件地址不会被公开。 必填项已用*标注