为什么CSS中的transform-origin在SVG元素上存在坐标系偏差
SVG元素不响应CSS的transform-origin，因其规范明确禁止；默认原点为0 0，百分比值相对viewBox而非自身，transform-box基本无效；跨浏览器方案首选原生transform属性如rotate(45 100 100)。
SVG元素根本不响应CSS的transform-origin
这不是“偏差”，而是规范明确禁止：SVG原生图形（如<circle>、<rect>、<path>）不参与CSS变换原点计算流程。浏览器看到transform-origin: 50% 50%直接忽略，不是解析错，是压根不读。
常见错误现象：<circle cx="100" cy="100">加style="transform: rotate(45deg); transform-origin: center;"，结果绕(0, 0)转飞了——因为transform-origin没生效，旋转默认锚点就是SVG坐标系左上角。
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）都遵守该规范，不存在“兼容性差异”
-
transform-origin只对有CSS layout box的元素起作用，而<circle>这类SVG图形没有 - 即使给
<svg>顶层标签设transform-origin，也不会向下透传到子图形
百分比值在SVG里指向viewBox，不是元素自身
就算某些浏览器（如旧版Firefox）部分支持transform-origin: 50% 50%，它的50%也是相对于viewBox宽高，不是<circle>的直径或<rect>的width/height。
例如viewBox="0 0 200 200"下，transform-origin: 50% 50%等于100px 100px；但若<circle cx="150" cy="150">，这个圆心根本不在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兼容环境都认的方式。
正确写法：<circle cx="100" cy="100" r="50" transform="rotate(45 100 100)">——后两个参数是绝对坐标，跟viewBox对齐，不依赖任何CSS解析。
-
rotate(angle x y)中的x y是世界坐标（即viewBox坐标系），不是元素相对坐标 - 若要绕任意点旋转，先算出该点在viewBox中的绝对位置，再填入
rotate(45 72.5 88)这类值 - 对
<g>组使用transform="translate(x,y) rotate(a)"也能间接实现，但需注意嵌套层级影响
强行套CSS时最易踩的overflow裁剪坑
如果非要用<div>包SVG再加CSS transform-origin，得立刻检查父容器是否带overflow: hidden。
旋转后SVG内容超出原始尺寸，会被裁掉——尤其rotate(90deg)时，原本200×100的SVG会变成100×200，但父<div>若没预留空间，右边一半就没了。
- 临时方案：给外层
<div>加padding或min-width/min-height兜底 -
will-change: transform可缓解闪动，但不能解决坐标错位本质问题 - 移动端频繁改
transform-origin会触发重排，动画卡顿不是CSS写错了，是渲染层被反复重建
