# 1. translate变换

translate 变换用来对用户坐标进行平移,通过制定 transform 属性值来设置: transform = "translate(x,y)"

translate 工作原理:首先获取整个网络,然后将其移动到画布的新位置而不是移动所在的元素,也就是说移动的是整个坐标系统而不是元素本身。看似比移动元素复杂,其实在使用其他一系列变换时,这种移动整个坐标系的方法从数学和概念上讲,更方便。

# 2. scale变换

缩放坐标系统。transform = "scale(value)" 或者 transform="scale(x-value,y-value)"

仅仅使用 scale(n) 变换时,网格系统的原点位置并没有变化,只是每个用户坐标都变成了原来的 n 倍,也就是网格变大了,因此线也会变粗(用户单位并没有变)。

技巧:如果从其他系统传输数据到 SVG,则可能必须处理使用笛卡尔坐标表示的矢量图形,在笛卡尔坐标系统中,原点位于左下角,y向上递增,x向右递增。而 SVG 坐标原点位于左上角,此时使用 scale(1,-1) 就可以完成两者之间的转换。

缩放变换永远不会改变图形对象的网格坐标或者笔画宽度,仅仅改变对应画布上的坐标系统网格的大小。

# 3. rotate变换

根据指定的角度旋转坐标系统,默认的坐标系统中,角度的测量顺时针增加,0 度为 3 点钟方向。

注意,除非另行指定,否则旋转以原点为中心。 此时可以通过平移+旋转的方式来指定旋转中心: translate(centerX,centerY) rotate(angle) translate(-centerX,-centerY)

但是有个更简单的方式:rotate(angle,centerX,centerY)

# 5. 围绕中心点缩放

上面提到,缩放默认是以原点为基准的,这显然不能满足需求,那么可以通过如下方式指定缩放中心:

translate(-centerX*(factor-1),-centerY*(factor-1)) scale(factor)

# 6. skewX和skewY变换

这两个变换用来倾斜某个轴,一般形式为 skewX(angle),skewY(angle)。这样的结果就是使得 x 轴和 y 轴不再垂直。

# 7. 矩阵变换

计算机图形学中坐标变换都通过矩阵来实现,除上述变换方法之外,还可以直接为变换指定变换矩阵,变换矩阵为 matrix(a,b,c,d,e,f),此时指定的变换矩阵为:

a  c  e
b  d  f
0  0  1
最后更新: 2021/7/5 下午5:48:01