04——svg中的图形分组＜g＞

一、在svg中，使用 <g> 标签来创建分组

• <g> 标签内部的图形，会继承其属性
• <g> 可以使用 transform 属性进行坐标变换，变换之后可以理解为新的自身坐标系
• <g> 标签可以嵌套使用

二、<g> 分组坐标变换的实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <g stroke="green" fill="none" transform="translate(0, 50)">
    <rect x="100" y="50" width="100" height="50"></rect>
    <rect x="140" y="100" width="20" height="120"></rect>
  </g>
</svg>

• <g> translate(0, 50) 后，自身坐标系整体下移50像素（下图紫色坐标系）
• <rect> 标签的位置x、y值，都是相对于父级<g>对应的坐标系 的值（为什么呢？请看下一篇）
• 当有嵌套时，依次类推
  

如何理解坐标系呢？请继续看下一篇文章