g标签的transform属性必须用svg原生函数格式写在标签上，如transform="translate(50,30) rotate(45) scale(2)"，顺序敏感且不接受css语法；fill等样式可继承但会被子元素显式设置覆盖；文字缩放需手动反向抵消；js修改时需注意覆盖写入和精度问题。
g 标签的 transform 属性怎么写才生效
transform 是 <g></g> 上唯一能直接驱动“统一变换”的核心属性，但它不接受 CSS 中的 transform: translate() 语法，必须用 SVG 原生函数格式：值是字符串，无单位（像素默认），空格分隔多个操作，且**顺序敏感**。
-
translate(50, 30)：向右 50、向下 30 —— 注意不是translateX/Y，也不是带单位的50px -
rotate(45 100 100)：绕点(100, 100)顺时针转 45°；省略坐标则默认绕原点(0, 0) -
scale(2, 0.5)：x 方向放大 2 倍，y 方向压缩到 50%；单参数如scale(1.5)表示等比缩放 - 组合写法：
transform="translate(20, 10) rotate(30) scale(0.8)"—— 先平移，再以新位置为基点旋转，最后缩放
常见错误：把 transform 当成 CSS 属性写在 style 里，比如 style="transform: rotate(45deg)"，这完全无效；SVG 的 transform 必须作为元素属性直接写在标签上。
fill/stroke/opacity 等样式属性会继承吗
会，但只对未显式覆盖的子元素生效。你在 <g fill="red"></g> 里放一个 <circle></circle> 和一个 <rect fill="blue"></rect>，结果是圆红、矩形蓝 —— 后者因自身设了 fill 而屏蔽了继承。
- 继承范围包括：
fill、stroke、stroke-width、opacity、visibility、font-family（对<text></text>有效） - 不继承：
x、y、cx、cy、r、width、height等定位与尺寸属性 - 嵌套
<g></g>时，内层会先继承外层，再被自身属性覆盖，形成级联效果
注意：继承不是“复制”，而是渲染时动态计算；如果子元素用了 currentColor，它取的是当前 <g></g> 的 color 值（需确保父级有定义），而非 fill。
为什么 group 里的 text 变形了，怎么固定字体大小
因为 scale() 会无差别缩放所有内容，包括文字轮廓和描边 —— 这是 SVG 默认行为，不是 bug。
- 最稳妥解法：避免对含
<text></text>的<g></g>使用scale()；改用viewBox+ CSSfont-size控制整体缩放感知 - 若必须缩放整组，给文字加
vector-effect="non-scaling-stroke"（仅防描边粗细变化），但文字本身仍会缩放 - 真正抗缩放的文字：用
transform="scale(1/scaleX, 1/scaleY)"在文字内部反向抵消，例如外层scale(2)，文字内写transform="scale(0.5)"—— 但需手动计算，易出错
关键点：SVG 中没有“CSS 那种 layout-aware 缩放”，transform 是纯几何矩阵运算，文字只是路径，没特殊豁免权。
JS 动态修改 g 的 transform 容易踩什么坑
用 setAttribute('transform', ...) 最直接，但有两个隐蔽陷阱：
- 覆盖而非叠加：每次调用都会**完全替换**整个字符串，不是追加。想从
translate(10,20)变成translate(10,20) rotate(5)，得自己拼字符串，不能只塞新部分 - 数值精度丢失：JS 计算坐标后传入字符串，若用
toFixed(1)截断，可能在动画中出现跳变；建议保留 2–3 位小数，或用模板字面量控制 - 性能提示：频繁修改
transform属性会触发重排；对大量 group，优先考虑 CSStransform（需包裹在<svg></svg>外的容器里）或使用requestAnimationFrame批量更新
真正复杂的是嵌套 group 的坐标系叠加 —— 比如外层 rotate(10)、内层 rotate(20)，最终是 30°，但 JS 读取 getCTM() 返回的是复合矩阵，人眼不可读；调试时别依赖 getAttribute('transform')，它只返回你写的原始字符串，不是实际生效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
