初始SVG(三)

2.2.分组的概念

为什么要使用分组呢？
好比你要对一个物体进行上色，而这个物体由多个组件组成，都是一个颜色，这个时候你就会发现一个一个去上色太麻烦了，所以也就有了分组的存在。

• <g>标签创建分组
• 属性继承(分组上设置的属性子元素可以继承)
• transform定义f分组坐标变换{使用element.setAttribute(name,value)设置即可}
• 可以嵌套

2.3.坐标系统

• 笛卡尔直角坐标系
  
• 原点：原点一般位于容器左上角
• 互相垂直的两条数轴
• 角度定义：X轴正方向到Y轴正方向为正角度

2.4.四个坐标系(貌似并没有什么用…)

• 用户坐标系(viewBox的参数设定是在这个维度上的)
  • 世界的坐标系
• 自身坐标系
  • 每个图形元素或分组独立与生俱来
• 前驱坐标系
  • 父容器的坐标系
• 参考坐标系
  • 使用其他坐标系来考究自身的情况时使用

2.5.坐标变换

• 定义
  • 描述一个坐标系的坐标变换到另一个坐标系的坐标的过程
• 线性变换
  • 这里不讲解具体的数学知识，具体请参考图形学内容
    
    
    
• 线性变换列表
• transform属性：定义前驱坐标系到自身坐标系的变换
  • 语法：
  • rotate(<deg>)*
  • translate(<x>,<y>)*
  • scale(<sx>,<sy>)*
  • matrix(<a>,<b>,<c>,<d>,<e>,<f>)*
  • 注意：变换的顺序能决定最终的情况，且变换是对自身坐标系而言
  • 如：先向x正方向平移50单位，再旋转30度，结果是这样的：
    
  • 而先旋转30度，再向x正方向平移50单位的结果是这样的：