<g>是SVG核心分组标签，本身不渲染，用于统一管理子元素的位置、变换（transform）和样式（fill/stroke等），支持嵌套构建局部坐标系，是实现逻辑清晰、可维护矢量图形的关键。
用 <g> 标签把多个图形包起来，就能统一管理位置、变换和样式。
<g> 是 SVG 里最直接的分组方式
它本身不画任何东西，只起“打包”作用。所有子元素（比如 <circle>、<rect>、<text>，甚至其他 <g>）都会继承它的属性，逻辑清晰，改一处就全动。
统一做平移、旋转、缩放
直接在 <g> 上写 transform，整组一起响应：
-
transform="translate(60, 40)"→ 全体向右60、向下40 -
transform="rotate(30 100 100)"→ 绕点 (100,100) 顺时针转30度 -
transform="scale(0.8) translate(-15, -10)"→ 先缩小到80%，再平移（注意顺序：先写的先执行）
统一设颜色、透明度等样式
在 <g> 上写 fill、stroke、opacity，子元素自动照用：
<g fill="purple" stroke="#222" stroke-width="1.2"> <circle cx="20" cy="20" r="12"/> <rect x="40" y="10" width="30" height="20"/> <text x="10" y="60">Label</text> </g>
三个图形都填紫色、描深灰边；文字也按 fill 上色（但 stroke 对 <text> 无效，需单独加）。
嵌套 <g> 构建局部坐标系
外层 <g transform="translate(80, 60)"> 相当于把原点移到 (80,60)，里面所有坐标都相对这个新原点算。
适合复用结构：比如画一排图标，每个图标封装在一个 <g> 里，只改外层 translate 就能整齐排列；齿轮、仪表指针等动画组件也靠这招解耦逻辑。
含文字时缩放要留心
对带 <text> 的 <g> 用 scale()，文字会跟着变小变细，易看不清。稳妥做法是：
- 避免整组
scale，改用 CSS 控制字体大小 - 或给
<text>单独加transform="scale(1.33)"反向抵消（1/0.75 ≈ 1.33） - 更推荐用
vector-effect="non-scaling-stroke"配合固定font-size
不复杂但容易忽略，却是让 SVG 从一堆形状变成有组织图形系统的关键一步。
