SVG原生元素不支持CSS定位，position属性被静默忽略；位置由x/y/cx/cy控制，transform基于自身坐标系原点计算；嵌入方式影响坐标系起点；viewBox是响应式定位的关键锚点。
SVG元素不参与CSS定位流，position: absolute直接被忽略
浏览器对SVG原生元素（如<circle></circle>、<rect></rect>、<text></text>）完全不应用CSS定位规则。你写position: absolute; top: 20px; left: 30px，它不会报错，也不会生效——属性被静默丢弃。这不是bug，是规范行为：SVG有自己的坐标系统，x、y、cx、cy才是真实控制位置的属性。
transform在SVG中基于自身坐标系原点计算，不是屏幕像素
给<circle cx="50" cy="50"></circle>加transform: translate(100, 0)，结果不是“圆心移到x=100”，而是“从x=50的位置再右移100”，最终落在x=150。这个原点由该元素自身的cx/cy或x/y决定，不受父容器position: relative影响。混用cx和transform极易误判最终位置。
嵌入方式决定坐标系起点，<img src="a.svg" alt="为什么CSS定位属性在SVG内部渲染时的表现与HTML不同？" >里根本不能用JS操作x/y
- 内联
<svg></svg>：坐标系原点默认对齐自身左上角，受父容器CSS（如margin、display: flex）影响 -
<img src="a.svg" alt="为什么CSS定位属性在SVG内部渲染时的表现与HTML不同？" >：SVG被当位图处理，x、y、transform全部失效，只能靠width/height和CSS控制显示区域 -
<object></object>或<iframe></iframe>：创建独立上下文，DOM隔离，无法用getBoundingClientRect()跨边界取真实位置
viewBox才是响应式定位的可控锚点，不是transform
想让SVG图形随窗口缩放还保持比例对齐，必须用viewBox="0 0 W H"（W/H为整数），而不是靠transform: scale()。因为viewBox定义的是逻辑画布到视口的映射关系，所有内部坐标都按此比例重算；而transform: scale()只是视觉拉伸，会触发插值模糊，且叠加后难以反推原始坐标。调试时优先检查viewBox是否设置、是否含偏移值（如"10 10 100 100"），这是90%定位漂移的根源。
