标签是SVG中不渲染但可统一控制变换与样式的分组容器，支持transform平移、旋转、缩放及嵌套构建局部坐标系，子元素自动继承fill、stroke等属性，文字需单独处理font-size或vector-effect以避免缩放失真。

标签是 SVG 中最直接、最有效的分组工具——它不画任何东西，但能让多个图形变成一个可整体操作的单元。关键不在“怎么写”，而在“怎么组织逻辑”。

用 统一控制位置和变形

把 、、 等包进 ，再加 transform 属性，整组就一起动：

• transform="translate(60, 40)"：整组向右下平移，子元素不用改 x/y
• transform="rotate(30 80 80)"：绕画布上 (80,80) 这个点顺时针转 30°（中心点必须显式写出）
• transform="scale(0.8) translate(-15, -10)"：先缩小，再平移——顺序不能颠倒，先写的先执行

用 统一样式，避免重复写属性

在 上设 fill、stroke、opacity，子元素自动继承（除非自己又写了同名属性）：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 文字 会正常继承 fill，但不会响应 stroke——想给文字描边，得单独加 stroke 属性
• 描边粗细 stroke-width 也会继承，缩放时要注意视觉一致性；若需抗缩放，可用 vector-effect="non-scaling-stroke"

嵌套 构建局部坐标系

外层 相当于把原点挪到 (120,90)，内层所有坐标都按这个新原点算：

• 画图标时，内部用 cx="0" cy="0" 设计，复用时只改外层 transform 定位
• 做旋转结构（如齿轮、仪表指针），外层控整体朝向，内层控部件分布，变换自然叠加
• 调试时可用 group.getCTM() 查当前累计变换矩阵，确认坐标是否符合预期

含文字的组做缩放要特别注意

transform="scale(2)" 会让文字也放大两倍，可能模糊或失衡：

• 优先用 CSS 控制 的 font-size，保持字号稳定
• 若必须缩放整组，建议把文字抽出来单独定位，或用 transform="scale(2)" 后对文字加反向缩放抵消
• 根 配合 viewBox 和 preserveAspectRatio，更适合响应式缩放场景

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！