SVG元素不响应CSS的transform-origin？别折腾了，换个思路
先直接给出结论：SVG原生图形（transform-origin，这并非浏览器bug，而是规范明确禁止的行为。很多开发者第一反应是“坐标系偏差”，其实连偏差都算不上——浏览器看到 transform-origin: 50% 50% 直接跳过，解析环节都直接省略了。
SVG元素根本不响应CSS的transform-origin
这根本不是“偏差”，而是规范明确禁止：SVG原生图形（transform-origin: 50% 50%直接忽略，不是解析出错，而是根本不读取。
常见错误现象：style="transform: rotate(45deg); transform-origin: center;"，结果绕(0, 0)旋转飞出去了——因为transform-origin没有生效，旋转默认锚点就是SVG坐标系的左上角。
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）都遵循该规范，不存在“兼容性差异”
transform-origin只对拥有CSS layout box的元素起作用，而- 即使给
顶层标签设置transform-origin，也不会向下透传到子图形
百分比值在SVG里指向viewBox，而非元素自身
就算某些浏览器（如旧版Firefox）部分支持transform-origin: 50% 50%，它的50%也是相对于viewBox的宽高，而不是width/height。
例如viewBox="0 0 200 200"下，transform-origin: 50% 50%等于100px 100px；但若
- 没有设置
viewBox的SVG，50%可能被解释为50px，行为完全不可控 transform-box: fill-box在SVG图形上基本无效，Chrome/Firefox/Safari均忽略- 关键词如
center在SVG中也受限，Safari ≤13.1会直接丢弃
真正跨浏览器可用的旋转方案只有原生transform属性
必须绕开CSS路径，改用SVG原生transform属性写死坐标。这是唯一所有SVG 1.1兼容环境都认可的方式。
正确写法：viewBox对齐，不依赖任何CSS解析。
rotate(angle x y)中的x y是世界坐标（即viewBox坐标系），不是元素相对坐标- 若要绕任意点旋转，先算出该点在viewBox中的绝对位置，再填入
rotate(45 72.5 88)这类值 - 对
transform="translate(x,y) rotate(a)"也能间接实现，但需注意嵌套层级带来的影响
强行套CSS时最易踩的overflow裁剪坑
如果非要用包裹SVG再加CSS transform-origin，必须立刻检查父容器是否带overflow: hidden。
旋转后SVG内容超出原始尺寸，会被裁掉——尤其rotate(90deg)时，原本200×100的SVG会变成100×200，但父若没有预留空间，右边一半就消失了。
- 临时方案：给外层
添加padding或min-width/min-height兜底 will-change: transform可缓解闪动，但不能解决坐标错位的本质问题- 移动端频繁修改
transform-origin会触发重排，动画卡顿不是CSS写错了，而是渲染层被反复重建
真正的难点从来不在“怎么写”，而在于意识到：SVG图形的坐标系统和CSS盒模型是两套平行的体系，硬拉它们对齐，只会让调试时间成倍增加。
