svg元素的transform-origin不生效是因为规范规定原生图形不响应该css属性，变换始终以viewbox左上角为基准；真正可行方案是使用svg原生transform属性、包裹配合translate，或css+div容器方案。
SVG元素的transform-origin为什么经常不生效
因为SVG原生图形（如<circle></circle>、<rect></rect>、<path></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></g>或<svg></svg>容器上有限支持transform-box: fill-box，但行为不一致 - IE11及所有旧版Android WebView完全不识别该属性
所以别浪费时间调试transform-box——它解决不了SVG的变换原点问题。
真正能落地的三种方案
必须绕过CSS transform-origin这条死路：
-
首选：用SVG原生
transform属性，例如<circle transform="rotate(45 100 100)"></circle>。后两个参数就是绝对坐标，直接指定旋转中心，所有SVG 1.1兼容浏览器都认 -
次选：包裹
<g></g>+translate，把旋转中心抽象成一个不可见容器：<g transform="translate(100,100)"><circle transform="rotate(45)" r="40"></circle></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()动态获取边界框再算中心，比硬编码更可靠，尤其面对缩放或响应式场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
