使用<g>标签进行图形分组

• <g>标签来创建分组
• <g>标签中的子元素继承<g>标签中的属性
• transform属性定义坐标变换
• 可以嵌套使用

SVG坐标系统

1. 用户坐标系
   svg是其下所有子元素的最终父元素，用户坐标系即svg本身的坐标系

• OA是svg元素的坐标系，是用户坐标系

2. 自身坐标系
   每个图形元素或独立分组自身带有坐标系

• svg元素的自身坐标系是OA
• id=“B”的元素的自身坐标系是OB
• id="C"的元素的自身坐标系是OC
• id="D"的元素的自身坐标系是OD

3. 前驱坐标系
   父容器的坐标系

• svg元素是所有元素的父元素，其没有父容器，故无前驱坐标系
• id=“B”的元素的父元素是svg元素，其前驱坐标系是OA
• id="C"的元素和id="D"的元素是一个整体，其共同父容器是id=“B”的元素，故其前驱坐标系是OB
• 的自身坐标系是OB

自身坐标系在没有设置transform属性时，与其前驱坐标系重合

4. 参考坐标系
   使用其它坐标系来考究自身的情况时使用，即用别人的坐标系来衡量自己

用Ouser作为参考坐标系，矩形的坐标是(50, 50)

线性变换

1. 平移

2. 旋转

3. 缩放

线性变换列表