为什么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写错了，是渲染层被反复重建

真正的难点从来不在“怎么写”，而在意识到：SVG图形的坐标系统和CSS盒模型是两套平行体系，硬拉它们对齐，只会让调试时间翻倍。