SVG元素的transform-origin不生效是因为规范规定原生图形不响应该CSS属性，变换始终以viewBox左上角为基准；真正可行方案是使用SVG原生transform属性、包裹<g>配合translate，或CSS+div容器方案。
SVG元素的transform-origin为什么经常不生效
因为SVG原生图形（如<circle>、<rect>、<path>）在绝大多数浏览器中根本**不响应CSS的transform-origin声明**——这不是bug，是规范行为。你写transform-origin: center或transform-origin: 50% 50%，浏览器会解析它，但不会用它来调整旋转/缩放中心。实际变换仍以SVG坐标系原点（即viewBox左上角）为基准。
transform-box在SVG里基本没用
transform-box本意是控制transform-origin的参考盒（border-box、fill-box等），但它对SVG元素的支持极差：
- Chrome、Firefox、Safari均**忽略**
transform-box在SVG图形元素上的设置 - 只有部分浏览器在
<g>或<svg>容器上有限支持transform-box: fill-box，但行为不一致 - IE11及所有旧版Android WebView完全不识别该属性
所以别浪费时间调试transform-box——它解决不了SVG的变换原点问题。
真正能落地的三种方案
必须绕过CSS transform-origin这条死路：
立即学习“前端免费学习笔记（深入）”；
-
首选：用SVG原生
transform属性，例如<circle transform="rotate(45 100 100)">。后两个参数就是绝对坐标，直接指定旋转中心，所有SVG 1.1兼容浏览器都认 -
次选：包裹
<g>+translate，把旋转中心抽象成一个不可见容器：<g transform="translate(100,100)"><circle transform="rotate(45)" r="40"/></g> -
应急：CSS +
div包裹，把SVG嵌进HTML块级容器里再设transform-origin，但要小心overflow: hidden裁剪旋转溢出部分
容易被忽略的坐标系陷阱
即使你用了transform="rotate(45 100 100)"，也得确认这组坐标是否真对应你想转的点：
-
cx/cy值必须和viewBox单位一致（比如viewBox="0 0 200 200"下cx="100"才等于中心） - 如果SVG没有
viewBox，而只靠width/height，那么100可能被解释为像素，而非相对比例 - 用
getBBox()动态获取边界框再算中心，比硬编码更可靠，尤其面对缩放或响应式场景
