HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述

发布时间：2020-11-24 00:28:25 所属栏目：MySql教程来源：互联网

导读：SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，记下来介绍下坐标与变换,感兴趣的朋友可以了解下啊，或许

用户坐标系的变换 - transform属性
该类型变换是通过设置元素的transform属性来指定的。这里需要注意，transform属性设置的元素的变换，只影响该元素及其子元素，与别的元素无关，不影响别的元素。

平移 - translate
平移变换把相关的坐标值平移到指定的位置，该变换需要传入两个轴上平移的量。看例子：

复制代码

代码如下:

这个例子绘制一个矩形，并把它的起点(0,0)平移到(30,40)处。虽然可以直接设置(x,y)的坐标值，但是使用平移变换去实现也很方便。这个变换第二个参数可以省略，默认当0处理。

旋转 - rotate
旋转一个元素也是一个很常见的任务，我们可以使用rotate变换实现，该变换需要传入旋转的角度参数。看例子：

复制代码

代码如下:

这个例子会显示一个旋转45度的矩形。有几点注意：
1.这里的变换是以角度值为参数的。
2.旋转指的是相对于x轴的旋转。
3.旋转是围绕用户坐标系的原点(0,0)展开的。

倾斜 - skew
transform还支持倾斜变换，可以是沿着x轴的(左右倾斜，正角度为向右倾斜，其实是倾斜了y轴)，或者是沿着y轴的(上下倾斜，正角度为向下倾斜，其实是倾斜了x轴)倾斜；该变换需要传入一个角度参数，这个角度参数会决定倾斜的角度。看下面的例子：

复制代码

代码如下:

从结果中，你可以直接看到同样尺寸的矩形，在不同的倾斜变换后，得到的位置和形状。这里注意矩形的起始位置都已经改变了，这是因为在新的坐标系统中，(30,30)已经在不同的位置了。

缩放 - scale
缩放对象由缩放变换完成，该变换接受2个参数，分别指定在水平和竖直上的缩放比例，如果第二个参数省略则与第一个参数取相同的值。看下面的例子：

复制代码

代码如下:

变换矩阵 - matrix
学过图形学的都知道，所有的变换其实都是由矩阵表征的，所以上面的变换其实都可以用一个3*3矩阵去表示：

复制代码

代码如下:

a c e
b d f
0 0 1

由于只有6个值用到了，所以也简写成[a b c d e f]。把matrix(a,b,c,d,e,f)赋给transfrom就可以实施相应的变换。变换会把坐标和长度都转换成新的尺寸。上面各种变换对应的矩阵如下：

平移变换[1 0 1 0 tx ty]：

复制代码

代码如下:

1 0 tx
0 1 ty
0 0 1

缩放变换[sx 0 0 sy 0 0]：

复制代码

代码如下:

sx 0 0
0 sy 0
0 0 1

旋转变换[cos(a) sin(a) -sin(a) cos(a) 0 0]：

复制代码

代码如下:

cos(a) -sin(a) 0
sin(a) cos(a) 0
00 1

沿X轴的倾斜[1 0 tan(a) 1 0 0]：

复制代码

代码如下:

1 tan(a) 0
0 1 0
0 0 1

沿Y轴的倾斜[1 tan(a) 0 1 0 0]：

复制代码

代码如下:

11 0
tan(a) 1 0
00 1

变换本质
前面我们总结canvas的时候，我们知道各种变换都是作用在用户坐标系上的。在SVG中，所有的变换也都是针对两个坐标系(本质上都是"用户坐标系")的。当给容器对象或图形对象指定"transform"属性，或者给"svg,symbol,marker,pattern,view"指定"viewBox"属性以后，SVG会根据当前的用户坐标系统进行变换，去创建新的用户坐标系，并作用于当前的对象以及它的子对象。该对象中指定的坐标和长度的单位不再是1:1的对应到外围的坐标系，而是随着变形，转换到新的用户坐标系中；这个新的用户坐标系是只作用于当前的元素及其子元素。

变换链
transform属性支持设置多个变换，这些变换只要中间用空格分开，然后一起放到属性中就可以了。执行效果跟按顺序独立执行这些变换是一样的。

复制代码

代码如下:

上面的效果与下面的一样：

复制代码

代码如下:

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/3

首页

尾页