svg嵌套变换本质是坐标系逐级映射，每层transform定义局部坐标系原点；viewbox为全局缩放锚点，调试需用getctm()或getscreenctm()获取真实像素位置。
处理 SVG 多层嵌套组合的坐标变换，核心不是“算清每一层”，而是**理解变换的叠加本质和作用域边界**——每层
变换是坐标系迁移，不是图形移动
给一个
- 嵌套越深，坐标系越“偏移”：外层 translate(30,40) + 内层 translate(-5,15)，等效于整体坐标系原点移到父系 (25,55)
- transform 属性值不叠加，而是串联应用：
先旋转再平移（注意顺序！） - DOM 中读取的 x、cx 等属性值始终是原始局部坐标，不会因 transform 改变
嵌套 是构建局部坐标系的最可靠方式
用
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 适合模块化设计：比如一个图标组件，用顶层
封装，外部只需改它的 transform 就能整体定位/缩放 - 动画更可控：对父
做 rotate，子 内部文字或细节可保持 upright（配合 vector-effect: non-scaling-stroke 或单独反向 transform） - 避免样式污染：fill、opacity 等样式设在父
上，子元素自动继承，无需重复写
viewBox 是全局缩放与映射的锚点
最外层
- viewBox 缩放会放大/缩小整个坐标系单位，影响所有 x/y/cx/cy 的实际像素表现
- width/height 控制视口大小，viewBox 控制内容如何填入——两者共同决定最终缩放比
- 建议固定 viewBox，用 CSS width/height 控制显示尺寸，避免 x/y 值“看起来没动但实际变小”
调试真实位置：别猜，要测
视觉位置 ≠ x + 所有 translate 之和。必须借助浏览器 API 获取最终像素坐标：
- getBBox()：返回元素在自身坐标系中的包围盒（不含 transform）
- getCTM()：获取从元素坐标系到当前 SVG 根坐标系的总变换矩阵
- getScreenCTM()：获取到屏幕坐标的完整变换链，配合 inverse() 可反推任意点
- 推荐组合：
element.getScreenCTM().inverse().multiply(svg.getScreenCTM())得到元素相对 SVG 画布的位置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
