资料来源 imooc 慕课网
2.1 世界，视野，视窗
- 世界：是无穷大的，由svg代码定义
- 视野：观看 世界 的一个矩形区域，由SVG编程者 通过
viewbox（视野大小），preserveAspectRatio（如何显示）控制 - 视窗：
width，height渲染出来的内容，是浏览器开辟的区域，可能因为其他条件而改变，可被网页前段编程人员 改变
世界与视野
2.2 SVG图形分组
<g>标签来创建分组：
- 属性可继承
- 可通过transform属性定义坐标变换
- 可嵌套
2.3 坐标系统概述
SVG使用的是 笛卡尔坐标系，但需要注意的是
- SVG中的坐标系Y轴是向下的
-
>0的角度是顺时针（从X轴正方向 => Y轴正方向的方向）
SVG的坐标系
2.4 四个坐标系
用户坐标系 User Coordinate
世界的坐标系，最原始的坐标系。其他所有的坐标系都是基于它的。
User Coordinate
自身坐标系 Current Coordinate
每个图形元素或分组独立与生俱来的�
前驱坐标系 Previous Coordinate
父容器的坐标系 �
User & Current & Previous
- OA：世界坐标系，也是SVG的自身坐标系
- OB的前驱坐标系？ OA，因为OA是OB的容器
- C和D的宽，高，x，y分别基于：C的自身坐标系OC 和 D的自身坐标系OD
- C和D的前驱坐标系是？ OB
- OB也是分组
id='B'的自身坐标系 -
<g id='B' transform="translate(0, 50)">是什么意思？组B的自身坐标系OB是从它的前驱坐标系OA通过translate(0, 50)这个操作得到的 - OB，OC，OD为什么重合了？因为OB同时是OC和OD的前驱坐标系，而OC和OD都没有定义
translate属性
参考坐标系 Reference Coordinate
其实就是任意一个坐标系。 是个相对坐标系，只在观察测量是使用
2.5 坐标变换
定义：SVG 中，「坐标变换」是对⼀一个坐 标系到另⼀一个坐标系的变换的描述
-
线性变换
a) 线性变换 之 平移
线性变换 之 平移
b) 线性变换 之 旋转
用极坐标表示直角坐标：
用极坐标表示直角坐标
线性变换 之 旋转
c) 线性变换 之 缩放
线性变换 之 缩放
d) 线性变换 之 混合变换： 单个线性变换矩阵，可以表⽰示所有的线性变换。但是，⼀一般我们去描述⼀一个线性变换可能更愿意分开⼀一步步来描述。比如说，先旋转30度，再平移（10，10）
==> 我们用一个矩阵表示旋转M(rotate)，另一个矩阵表示平移M(translate)
==> 最后两个矩阵的乘积即为 该混合变换的结果
==> 需要注意的是： 顺序是影响效果的，最后⾯面的变换，需要乘在前⾯面。
image.png -
transform属性：表达的是 前驱坐标系 到 自身坐标系 的线性变换
transform属性 通过实例来说明
实例视频点击这里
实例代码点击这里
> 每一步的变换，都是基于前面变换完成之后的自身坐标系进行的
> 对一个坐标系的transform对其所有包含的内容（包含的子坐标）都有效
