多层嵌套 svg 的坐标映射需逐层逆向应用变换矩阵。关键在于区分每层 viewport 与 user coordinate system，按 dom 层级自外向内处理 viewbox 和 transform，并优先使用 getscreenctm() 与 matrixtransform() 等标准 api 实现准确映射。
多层嵌套 SVG 的坐标映射不是简单叠加，而是逐层变换的累积过程。关键在于区分每一层的视口（viewport）和用户坐标系（user coordinate system），并按 DOM 层级自外向内依次应用变换矩阵。
理解嵌套 SVG 的两套坐标系关系
每层 <svg></svg> 元素都会创建一个独立的 SVG 视口，并同时定义自己的视窗坐标系（viewport coordinate system）和用户坐标系（user coordinate system）。初始时二者重合，但一旦设置了 viewBox 或 transform，用户坐标系就会相对于视窗坐标系发生缩放、平移或旋转。
- 外层 SVG 的
width/height决定其在 HTML 中占据的 CSS 尺寸（即视窗大小） - 外层 SVG 的
viewBox定义其内部用户坐标系的范围，从而建立“用户单位 ↔ CSS 像素”的映射 - 内层 SVG 作为外层的子元素，其
width/height默认按外层用户坐标系的单位解析（除非显式用 px 等绝对单位） - 内层 SVG 的
viewBox再次重新定义它自己的用户坐标系——这层映射是相对于外层用户坐标系进行的
计算嵌套坐标需按层级顺序逆向推导
要把屏幕上的点击位置（如 event.clientX/clientY）准确映射到最内层 SVG 元素的用户坐标中，必须从屏幕出发，逐层减去偏移、逆向应用缩放和平移：
- 先用
getScreenCTM()获取最外层 SVG 元素到屏幕的总变换矩阵（含所有祖先 CSS 偏移、transform、viewBox缩放） - 对每个嵌套的 SVG 元素，调用其
getScreenCTM().inverse()得到该层从屏幕到其用户坐标的逆矩阵 - 实际操作中更可靠的方式是：从目标元素向上遍历父 SVG，对每一层调用
getCTM()（当前元素相对于其直接父 SVG 用户坐标系的变换），再连乘得到总变换矩阵 - 最终用这个总矩阵的逆矩阵，将屏幕点转换为最内层 SVG 的用户坐标
注意 viewBox 和百分比单位的连锁影响
嵌套 SVG 中若某一层使用了 viewBox，不仅改变本层坐标系，还会重定义百分比单位的参考基准：
- 内层 SVG 的
width="50%"是相对于其直接父 SVG 的视窗宽（不是浏览器窗口） - 如果父 SVG 有
viewBox="0 0 100 100"且自身width="200"，那么 50% 就等于 100 用户单位（而非 100px） - 这意味着内层 SVG 的用户坐标系原点、缩放比例都依赖于外层的
viewBox解析结果，不能跳过中间层直接换算 - 调试时可用
element.getBoundingClientRect()配合element.getCTM()对照验证各层实际像素尺寸与用户单位的对应关系
实用建议：避免手动计算，优先使用标准 API
浏览器原生 API 已封装好嵌套坐标转换逻辑，比手写矩阵更稳定：
- 对任意 SVG 元素，调用
element.getScreenCTM()可获取其用户坐标系到屏幕的完整变换矩阵（含所有嵌套影响） - 用
svgElement.createSVGPoint()创建点对象，再调用.matrixTransform(ctm.inverse())完成屏幕→用户坐标的转换 - 若需频繁转换，缓存各层
getCTM()结果，避免重复计算；监听resize或scroll时及时更新缓存 - 慎用
offsetLeft/Top或getBoundingClientRect()直接加减——它们只反映视窗坐标，无法反映viewBox引起的非线性缩放
