数学坐标系与网格坐标系
数学坐标系
众所周知，数学上的坐标系统，大部分是指 笛卡尔直角坐标系
这种坐标系特点是：x轴向右，y轴向上，角度为逆时针
网格坐标系
有许多计算机绘图都使用网格坐标系(Canvas、SVG、Css3-transform二位坐标系等)，这种坐标系的特点有：
1.左上角为网格坐标系原点(0, 0)
2.X 轴的正方向向右，Y 轴的正方向向下，角度为顺时针。
3.坐标以像素为单位
<svg viewbox="0, 0, 300, 300" style="border: 1px solid steelblue; position: relative; left: 100px; top: 100px;">
<rect x="0" y="0" width="100" height="100" fill='green' />
</svg>
以 0,0 为起始点，在长宽都为300的画布上，画一个 100 * 100 的矩形，填充绿色
SVG坐标系
我们现在重点来分析SVG的坐标系统。在SVG中，共有四种坐标系：
1.用户坐标系
2.自身坐标系
3.前驱坐标系
4.参考坐标系
一.用户坐标系
用户坐标系也可以称为svg坐标系。
viewBox与视窗坐标系
viewBox 语法 viewBox =
- 平移
<svg width="100" height="100" style="outline: 1px solid green">
<circle x="0" y="0" r="50" fill="red" />
</svg>
添加viewBox="-50 -50 100 100"，将圆形移动到视窗内
<svg width="100" height="100" viewBox="-50 -50 100 100"
style="outline: 1px solid green">
<circle x="0" y="0" r="50" fill="red" />
</svg>
通过改变viewBox的min-x和min-y，实现了将视窗向左向上进行平移，从而看到一个完整的圆。
2.缩放
通过改变viewBox的width和height可以缩放viewBox指定的区域。
<svg width="100" height="100" viewBox="0 0 100 100" style="outline: 1px solid green">
<circle cx="0" cy="0" r="50" fill="red" />
</svg>
如图1-图2，将viewBox的width和height从100改为50，也就是使viewBox的宽高小于视窗的宽高，可以实现圆形的视觉放大。同理，当viewBox的宽高大于视窗的宽高，可以实现圆形视觉的缩小。
<svg width="100" height="100" viewBox="0 0 50 50" style="outline: 1px solid green">
<circle cx="0" cy="0" r="50" fill="red" />
</svg>
二.自身坐标系
图形元素或分组本身具有的坐标系
在下图中，rect坐标系与svg网格坐标系（用户坐标系）都是重合的。
三.前驱坐标系
即父级坐标系。自身坐标系不发生变换的情况下，和前驱坐标系是重合的。
如下图，rect 变换后自身坐标系是蓝色部分，rect的前驱坐标系即svg坐标系（用户坐标系）。
四.参考坐标系
参考坐标系是相对概念，没有特指是哪种坐标系。上图中，用户坐标系可以作为rect的参考坐标系。当参考坐标系发生变化，坐标值要重新计算。
例如上图中，如果粉色rect2以蓝色rect1的为参考坐标系，rect2的左上角坐标应该为(20， 20)；如果以用户坐标系作为rect2的参考坐标系，rect2的坐标应为(50,50)。
综合举例：
如图所示，用户坐标系为OA，g标签的坐标系经过translate向下平移30单位后，来到OB的位置，OC和OD的坐标系与OB重合，元素C和D的偏移量都是是相对于OB这个前驱（父级）坐标系来操作的。
还有一个要注意的点是，g标签代表的是元素分组，它本身的作用范围（2个rect外层的红色边框）是由内部元素决定的，但是g的坐标系是OB，是2个不同的概念。
