transform · 枢轴 ★

transform-origin：旋转枢轴在哪

给 SVG 图形写一句 transform: rotate(30deg)，结果常常不是原地转一下，而是整块图形被甩到一边。根源是两个默认值合力：SVG 内部图形元素的 transform-origin 用值是 0 0（并非自身中心），而 transform-box 初始值是 view-box——于是旋转枢轴落在 viewBox 坐标系的原点，也就是画布左上角，图形绕着画布角公转。

图 0-1 · 同一个方块（虚线框是不动的原始位置），可拖角度滑块旋转它。橙色十字标出当前的旋转枢轴，切三种写法看它移到哪。

图 0-2 · 三种写法对应的 CSS，随上方选择同步生成。

警示 · 这是 SVG 与 HTML 的一处关键差异。普通 HTML 元素 transform-origin 默认 50% 50%（自身中心），而 SVG 内部图形元素默认 0 0。同一句 rotate()，在 <div> 上原地转、在 <rect> 上却绕画布原点甩，不少「图标 hover 旋转却飞出去」的问题都源于此。根 <svg> 元素本身是例外——它有自己的 CSS 布局盒，默认仍是 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 坐标。