SVG原生元素不支持position: absolute，必须用x/y/cx/cy或transform定位；transform基于自身坐标系原点，叠加时相对当前状态计算；响应式应优先使用viewBox而非CSS transform。
SVG内元素不能直接用position: absolute定位？
对，SVG容器本身不是CSS定位上下文，position: absolute在<svg>内部对<circle>、<text>等原生SVG元素完全无效——它们压根不参与CSS定位流。你写的top: 20px会被浏览器静默忽略。
真正起作用的是SVG自己的坐标系统：x、y、cx、cy等属性。想“定位”，得改这些，而不是套CSS定位样式。
- 如果非要套
position: absolute，只能把目标元素（比如<div>）从DOM抽出来，用transform: translate()手动摆到SVG可视区对应位置，再用z-index叠上去 -
<foreignObject>可以嵌HTML，但它有兼容性坑（Safari对transform支持不稳定，且无法响应SVG的缩放/视口变化） - 别给
<svg>加position: relative指望它当定位根——没用，SVG元素不认这个
用transform移动SVG元素时，为什么坐标和预期不一致？
因为transform: translate(x, y)作用在SVG元素上时，是相对于**自身坐标系原点**生效的，而这个原点默认就是该元素自身的x/y或cx/cy位置。如果你同时设了cx="50"又写transform: translate(100, 0)，结果不是“移到x=100”，而是“从x=50的位置再往右移100”。
- 想精准控制最终位置，优先删掉原始
x/y等属性，只用transform驱动 - 注意单位：SVG中
transform的数值默认是用户单位（user units），和CSS像素一致，但若SVG设置了viewBox或缩放，视觉位移会受其影响 -
transform: translate()叠加多次不会合并，每次都是相对当前状态计算，容易误判累积效果
SVG group（<g>）里套transform和单个元素加transform有啥区别？
本质一样，但层级不同：套在<g>上的transform会**批量影响所有子元素**，且子元素的坐标是相对于<g>变换后的新坐标系解析的。这比逐个给子元素加transform更轻量，也更容易做整体动画或拖拽。
立即学习“前端免费学习笔记（深入）”；
- 例如：
<g transform="translate(10, 20)"><circle cx="0" cy="0" r="5"/></g>，圆心实际出现在SVG画布的(10, 20)处 - 但如果子元素自己也有
cx，比如<circle cx="100" cy="0" r="5"/>，那它最终出现在(110, 20)，不是(100, 0) - 避免混用：
<g transform="scale(2)">里再给子元素加transform: rotate(45deg)，旋转中心会随缩放偏移，调试困难
想让SVG元素随窗口缩放保持位置比例，该用viewBox还是transform？
必须用viewBox。它是SVG响应式的核心机制；transform只是视觉位移，不改变坐标语义，也无法自动适配容器尺寸变化。
典型错误是：给<svg>设width: 100%却不设viewBox，结果SVG内容被拉伸变形，transform位移值也跟着失真。
- 正确姿势：
<svg viewBox="0 0 200 100" width="100%">，所有内部坐标（cx、x、transform里的数值）都按0–200 / 0–100这个逻辑画布理解 -
transform仍可用，但它的数值应基于viewBox定义的单位来设计，而不是物理像素 - 别在JS里监听
resize然后反复重算transform——那是倒退，viewBox+ CSS宽高控制就足够
最常被忽略的一点：SVG内部元素的transform和外部CSS的transform属于不同坐标空间，混用时务必确认参照系——前者基于SVG用户坐标，后者基于CSS布局盒，强行桥接容易错位两三个像素，还不好排查。
