标签是SVG中不渲染但可统一控制变换与样式的分组容器，支持transform平移、旋转、缩放及嵌套构建局部坐标系，子元素自动继承fill、stroke等属性，文字需单独处理font-size或vector-effect以避免缩放失真。
用 统一控制位置和变形
把 <circle></circle>、<rect></rect>、<path></path> 等包进 <g></g>，再加 transform 属性，整组就一起动：
-
transform="translate(60, 40)"：整组向右下平移，子元素不用改x/y -
transform="rotate(30 80 80)"：绕画布上 (80,80) 这个点顺时针转 30°（中心点必须显式写出） -
transform="scale(0.8) translate(-15, -10)"：先缩小，再平移——顺序不能颠倒，先写的先执行
用 统一样式，避免重复写属性
在 <g></g> 上设 fill、stroke、opacity，子元素自动继承（除非自己又写了同名属性）：
- 文字
<text></text>会正常继承fill，但不会响应stroke——想给文字描边，得单独加stroke属性 - 描边粗细
stroke-width也会继承，缩放时要注意视觉一致性；若需抗缩放，可用vector-effect="non-scaling-stroke"
嵌套 构建局部坐标系
外层 <g transform="translate(120, 90)"></g> 相当于把原点挪到 (120,90)，内层所有坐标都按这个新原点算：
立即学习“前端免费学习笔记（深入）”；
- 画图标时，内部用
cx="0" cy="0"设计，复用时只改外层transform定位 - 做旋转结构（如齿轮、仪表指针），外层控整体朝向，内层控部件分布，变换自然叠加
- 调试时可用
group.getCTM()查当前累计变换矩阵，确认坐标是否符合预期
含文字的组做缩放要特别注意
transform="scale(2)" 会让文字也放大两倍，可能模糊或失衡：
- 优先用 CSS 控制
<text></text>的font-size，保持字号稳定 - 若必须缩放整组，建议把文字抽出来单独定位，或用
transform="scale(2)"后对文字加反向缩放抵消 - 根
<svg></svg>配合viewBox和preserveAspectRatio，更适合响应式缩放场景
