SVG rotate默认绕(0,0)旋转，需指定中心坐标cx/cy才能绕自身中心旋转；矩形中心为(x+width/2,y+height/2)，圆形即cx/cy，path可用getBBox()计算；也可用translate+rotate+translate三步模拟，或CSS transform-origin（仅限整个SVG元素）。
SVG的rotate变换默认绕坐标原点（0, 0）旋转，若要绕图形自身中心或任意点旋转，必须显式指定中心坐标。
rotate()语法与默认行为
transform="rotate(angle [cx cy])"中，angle为旋转角度（顺时针为正），cx和cy是可选的旋转中心坐标（相对于当前坐标系）。若省略cx cy，SVG将始终以画布左上角（0, 0）为旋转中心，这常导致图形“飞出视野”。
让图形绕自身中心旋转
需先计算图形的中心坐标，再代入rotate。常见做法有：
- 对
<rect>：中心为(x + width/2, y + height/2) - 对
<circle>：中心即其cx、cy属性值 - 对
<path>或不规则图形：可用getBBox()获取包围盒，再算中心：box.x + box.width/2和box.y + box.height/2
例如：
<rect x="50" y="30" width="100" height="60" fill="blue" transform="rotate(45 100 60)" />
这里100, 60正是矩形中心（50+100/2 = 100，30+60/2 = 60），旋转后图形保持原位转动。
使用transform-origin配合CSS（仅适用于内联SVG）
若SVG元素通过CSS控制（如设置display: inline-block），可结合transform-origin实现视觉上的中心旋转：
立即学习“前端免费学习笔记（深入）”；
-
transform-origin: center;—— 等效于50% 50%，以元素盒模型中心为原点 -
transform-origin: 50px 80px;—— 指定绝对坐标
注意：该方式依赖CSS变换，且只对整个SVG元素生效，不适用于内部单个<g>或<path>的精细控制；同时需确保SVG容器有明确尺寸（如设width/height或viewBox），否则center可能失效。
推荐做法：组合transform平移+旋转+反向平移
当动态计算中心不便时，可用三步变换模拟绕点旋转：
- 用
translate(-cx, -cy)把图形“搬”到原点 - 执行
rotate(angle) - 再用
translate(cx, cy)“搬回”原位
写成一行：
transform="translate(100,60) rotate(45) translate(-100,-60)"
效果与rotate(45 100 60)完全一致，逻辑更直观，也便于JS动态拼接。
