为什么CSS transform-origin在SVG中存在坐标系偏差？

SVG元素不响应CSS的transform-origin？别折腾了，换个思路

首先给出结论：SVG原生图形（、、）根本不响应CSS的 transform-origin，这不是浏览器存在问题，而是规范明确禁止的。很多开发者第一反应是“坐标系偏差”，但实际上连偏差都算不上——浏览器看到 transform-origin: 50% 50% 直接跳过，连解析都省了。

SVG元素根本不响应CSS的transform-origin

这不是“偏差”，而是规范明确禁止：SVG原生图形（、、）不参与CSS变换原点计算流程。浏览器看到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的元素起作用，而这类SVG图形没有
• 即使给顶层标签设置transform-origin，也不会向下传递到子图形

百分比值在SVG里指向viewBox，不是元素自身

即便某些浏览器（如旧版Firefox）部分支持transform-origin: 50% 50%，它的50%也是相对于viewBox宽高，而不是的直径或的width/height。

例如，在viewBox="0 0 200 200"下，transform-origin: 50% 50%等于100px 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裁剪坑

如果非要用