SVG viewBox坐标系与CSS定位原点不一致，应优先用内部单位对齐；必须CSS定位时用getScreenCTM()转换坐标；避免混用CSS/SVG transform、preserveAspectRatio="none"及硬编码像素值。
SVG viewBox 和 CSS 定位的坐标原点不一致
SVG 的 viewBox 默认以左上角为 (0, 0)，但一旦用 CSS 给 SVG 加了 position: relative 或 transform，它的定位上下文就变了——这时候用 top/left 对齐元素，实际参考的是父容器的盒模型，不是 SVG 内部坐标系。
常见错误现象：top: 10px 看起来偏移了，但 SVG 里的 <circle cx="10" cy="10"></circle> 却没对上页面上的某个 DOM 元素；或者缩放后完全错位。
- 始终优先用 SVG 内部单位对齐：把需要对齐的点（比如图标中心、箭头尖端）明确换算成
viewBox坐标，再用transform或cx/cy调整，而不是依赖外部 CSS 偏移 - 如果必须用 CSS 定位（例如悬浮 tooltip 跟随 SVG 图形），用
getBBox()或getScreenCTM()动态算真实像素位置，别硬写死left/top -
preserveAspectRatio="none"会拉伸viewBox，彻底破坏坐标映射关系，除非真需要形变，否则别开
用 getScreenCTM() 把 SVG 坐标转成页面像素
这是唯一靠谱的“SVG 内部点 → 页面绝对位置”转换方式。它考虑了所有嵌套 transform、viewBox 缩放、CSS 缩放（scale()）、甚至 iframe 偏移。
使用场景：点击 SVG 图形后，在对应位置弹出浮层；拖拽时实时显示坐标提示；与 Canvas 或 WebGL 共享坐标逻辑。
立即学习“前端免费学习笔记（深入）”；
- 调用前确保 SVG 已渲染完成（比如在
requestAnimationFrame或DOMContentLoaded后） - 对
<g></g>或<path></path>元素调用，别对整个<svg></svg>标签——后者返回的是根坐标系，不含子元素 transform - 示例：获取一个圆心的真实页面坐标：
const circle = document.querySelector('circle');<br>const ctm = circle.getScreenCTM();<br>const pt = svg.createSVGPoint();<br>pt.x = parseFloat(circle.getAttribute('cx'));<br>pt.y = parseFloat(circle.getAttribute('cy'));<br>const screenPos = pt.matrixTransform(ctm); // {x, y} 是页面像素值
CSS transform: translate() 和 SVG transform 混用导致坐标漂移
给 SVG 标签加 transform: translate(20px, 30px)，再在里面画一个 <rect x="0" y="0"></rect>，这个矩形的实际屏幕位置 ≠ 父容器左上角 + 20 + 30 —— 因为 SVG 内部 transform 是基于自身坐标系叠加的，而 CSS transform 是作用在渲染盒子上，两者叠加顺序和基准不同。
性能影响：CSS transform 触发合成层，但 SVG 内部 transform 不一定；混用可能让浏览器反复重排重绘。
- 统一用 SVG 内部
transform（如<g transform="translate(20,30)"></g>）来控制图形布局，CSS 层只做容器级定位或动画 - 如果要用 CSS 控制 SVG 整体位移，去掉所有内部
transform，改用viewBox平移（比如viewBox="-20 -30 200 200"）更可控 - 调试时用浏览器开发者工具的“Rendering”面板勾选 “Paint flashing”，看是否意外触发重绘
响应式 SVG 中 width/height 设为 100% 后坐标计算失准
当 SVG 的宽高设为 100% 且父容器尺寸动态变化时，viewBox 定义的逻辑坐标和实际像素比例每帧都在变。此时硬编码的 cx/cy 值或 JS 里写的像素偏移会立刻失效。
容易踩的坑：监听 window.resize 但没重算 SVG 缩放比；用 clientWidth 直接除 viewBox 宽度，却忽略了 preserveAspectRatio 导致的裁剪。
- 用
svg.getBoundingClientRect()获取当前渲染宽高，再除以viewBox的宽高，得到实时缩放系数 - 避免在 resize 回调里频繁调用
getBBox()或getScreenCTM()，它们是重操作，建议节流或仅在必要时调用 - 如果只是要做等比缩放对齐，直接用
vector-effect="non-scaling-stroke"控制描边，比手动算坐标更稳定
getScreenCTM() 返回的矩阵，不是靠猜。 
