元素是 svg 中实现整体变换的操作锚点，transform 必须写在 上才能统一作用于子元素；嵌套 可构建局部坐标系，但建议控制在三层以内；含 的组应避免直接 scale，宜用 css font-size 或反向抵消。
<g></g> 元素本身不渲染，但它是 SVG 中最实用的“操作锚点”——只要把图形包进去，统一平移、旋转、缩放就只改一行 transform，不用挨个动子元素坐标。
transform 写在 <g></g> 上才能整体生效
常见错误是把 transform 加在 <circle></circle> 或 <rect></rect> 上，结果只动单个图形。真正想“拖动整个图标”或“旋转一组齿轮”，必须写在包裹它们的 <g></g> 标签上：
-
transform="translate(80, 60)"：整组右移 80px、下移 60px（x 在前，y 在后） -
transform="rotate(25 100 100)"：绕点 (100, 100) 顺时针转 25°；漏掉中心坐标会默认绕 (0, 0)，常导致图形飞出视野 -
transform="scale(0.7) translate(-15, -10)"：先等比缩小到 70%，再平移——顺序不可颠倒，先写的先执行
嵌套 <g></g> 构建局部坐标系，避免手动算偏移
比如画一个带指针的表盘：外层 <g transform="translate(200, 200)"></g> 把原点移到表盘中心，内层所有 cx/cy 就能直接用相对坐标（如 <circle cx="0" cy="0" r="10"></circle> 表示表心）。再套一层 <g transform="rotate(120)"></g> 放指针，指针的 x/y 就按自身角度写，不用换算绝对位置。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 调试时可用
group.getCTM()查当前变换矩阵，确认是否叠加预期 - 嵌套越深，坐标系越“隔离”，但过度嵌套会让
transform难以追踪，建议三层以内
对含 <text></text> 的组做 scale 会变形，得绕开
<text></text> 跟图形不同，它继承 scale 后字体会变细/模糊，且描边（stroke）默认不生效。真要缩放文字为主的组，别用 transform="scale()"：
- 优先用 CSS 控制
font-size，配合viewBox和preserveAspectRatio让整个<svg></svg>响应式缩放 - 若必须用
scale，给文字加vector-effect="non-scaling-stroke"防描边失真，但填充大小仍会变 - 更稳妥的做法：把文字单独拎出来，用
transform="scale(1/x, 1/y)"反向抵消，但计算麻烦，易出错
真正难的不是写对 transform，而是判断该在哪一层 <g></g> 上写——多一层嵌套就多一重坐标系叠加，少一层又可能破坏复用结构。实际改需求时，先看动画/交互触发的是哪部分，再决定分组边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
