g 标签是 SVG 中用于分组的容器，不直接渲染图形，但支持统一坐标变换、批量控制显示/交互、样式继承与复用、提升结构可读性。
svg元素分组方法">
g 标签是 SVG 中用于分组其他 SVG 元素的容器标签，本身不直接渲染图形，但能统一控制内部元素的坐标变换、样式继承和显示状态。
统一坐标变换（平移、旋转、缩放）
把多个图形包在 g 里后，只需对 g 设置 transform，内部所有子元素会一起响应。比如：
-
让里面所有图形整体右移 50、下移 30； -
以点 (100,100) 为原点整体旋转 45 度； - 嵌套 g 可实现多层变换，比如先平移再旋转，逻辑更清晰。
批量控制显示与交互
通过给 g 设置 display="none" 或 visibility="hidden"，可一键隐藏或显示整组内容；也能统一绑定事件（如 onclick），点击分组即触发，适合做按钮、图例、可折叠模块等。
简化样式管理和复用
在 g 上设置 fill、stroke、opacity 等属性，子元素若未单独覆盖，会自动继承。配合 id 或 class，还能用 CSS 批量控制样式，比如：
-
- 再写 .icon { fill: #333; } 就能统一着色。
提升结构可读性与维护性
把逻辑相关的图形（如一个图标、一个人物、一个图表系列）用 g 包裹，并加上注释或有意义的 id（如 id="header-logo"），SVG 代码更易理解、调试和复用，也方便 JS 动态操作整组元素。
