关于前端:svg04svg中的图形分组＜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> 对应的坐标系 的值（为什么呢？请看下一篇）

• 当有嵌套时，顺次类推
  

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