SVG元素的transform-origin默认值是0 0，不是center；直接对<circle>应用transform: rotate(45deg)会使其绕左上角(0,0)旋转而偏移，需显式设置transform-origin: center才能原地旋转。
SVG元素的transform-origin默认值不是center
直接给 <circle> 写 transform: rotate(45deg) 却没动？不是CSS失效，是它正绕着 (0, 0) 疯狂旋转——SVG元素的 transform-origin 默认值是 0 0，不是HTML元素的 50% 50%。这个差异在Chrome/Firefox/Safari里一致，但IE（transform-origin 作用于SVG，必须换方案。
用CSS设置transform-origin时必须显式写单位或关键词
写成 transform-origin: center 看似简洁，但在部分旧版Safari（≤13.1）和某些Android WebView中会失效；更稳妥的是用等价的 transform-origin: 50% 50% 或具体坐标 transform-origin: 100px 100px（前提是坐标系单位明确）。注意：
-
transform-origin的两个值必须同时存在，只写一个（如transform-origin: center）在部分渲染引擎中会被忽略 - 百分比值基于元素自身的尺寸计算，但SVG元素的“自身尺寸”在无
width/height且依赖viewBox时可能不可靠 - 若
<circle cx="100" cy="100" r="40">在viewBox="0 0 200 200"内，50% 50%才真正对应圆心；否则得用绝对坐标
更兼容的替代方案：改用SVG原生transform属性
当目标环境包括IE11或老旧移动浏览器时，放弃CSS transform + transform-origin 组合，直接用SVG标签级 transform 属性：
<circle cx="100" cy="100" r="40" fill="blue" transform="rotate(45 100 100)" />
这里 rotate(45 100 100) 的后两个参数就是旋转中心的x、y坐标，完全绕过CSS解析歧义。优点：
立即学习“前端免费学习笔记（深入）”；
- 所有支持SVG 1.1的浏览器都认这个语法
- 无需担心
transform-origin兼容性，也不触发重排（layout） - 动画时若配合
requestAnimationFrame动态更新该属性，性能比JS反复改CSStransform-origin高得多
动态旋转时避免频繁修改transform-origin
如果要用CSS动画实现“绕不同点旋转”，比如钟摆效果，千万别在每帧用JS去设 element.style.transformOrigin = x + 'px ' + y + 'px'。这会强制同步计算布局，掉帧明显。正确做法是：
- 把旋转中心点抽象为一个不可见的
<g>容器，用translate移动它，再让子元素相对它静止旋转 - 或者用
transform: translate(x, y) rotate(θ) translate(-x, -y)复合变换模拟原点偏移（注意顺序不能反） - 确认父容器没设
overflow: hidden或clip-path，否则旋转后超出的部分会被意外裁剪
transform-origin: center 就万事大吉——它在SVG里根本不是默认行为，且在跨端场景下连“写对了”都不等于“跑通了”。 
