transform-origin：旋转枢轴在哪
给 SVG 图形写一句 transform: rotate(30deg)，结果常常不是「原地转一下」，而是整块图形被甩到一边。根源是两个默认值合力：SVG 内部图形元素的 transform-origin 初始值是 0 0（并非自身中心），而 transform-box 初始值是
view-box——于是旋转枢轴落在 viewBox 坐标系的原点（画布左上角），图形绕着画布角「公转」。
同一个方块（虚线框是不动的原始位置），拖角度滑块旋转它。橙色十字标出当前的旋转枢轴，切三种写法看它移到哪：
SVG 与 HTML 的关键差异： 普通 HTML 元素 transform-origin 默认 50% 50%（自身中心），而 SVG 内部图形元素默认 0 0。同一句 rotate()，在 <div> 上原地转、在 <rect> 上却绕画布原点甩——不少「图标 hover 旋转却飞出去」的问题都源于此。（根 <svg> 元素本身是例外，默认仍是 50% 50%。）
把枢轴钉回图形自己身上： transform-box: fill-box 让 transform-origin 的百分比改为相对元素自己的包围盒计算，此时 transform-origin: center 才是图形中心、rotate() 原地自转。这与
paint-server 一页 gradientUnits 的 objectBoundingBox 是同一条主线——值相对哪个盒子，正是 SVG 坐标系最常见的困惑点。若不想动 CSS 盒子，也可以用 SVG 自带的
transform="rotate(angle cx cy)" 三参数语法，把旋转中心直接写成 user 坐标。