如何设置SVG变换原点，使单个圆形绕自身中心旋转？

嗨，这个坑我之前踩过！其实问题出在SVG里transform-origin的坐标规则和普通HTML元素不一样——默认情况下它是基于整个SVG视口的坐标系，而不是单个元素自身的坐标系，所以你写center的时候，它会对应整个SVG的中心，自然就跑偏了。

给你几个靠谱的解决办法：

方法1：用<g>标签包裹单个圆形，旋转<g> #

这是最直观也最稳妥的方式。<g>标签的变换原点默认是它包裹元素的边界框中心（也就是圆的圆心），把旋转变换应用在<g>上，圆形就会乖乖绕自己的中心转：

<svg width="400" height="400">
  <!-- 红色圆绕自身中心旋转45度 -->
  <g transform="rotate(45)">
    <circle cx="100" cy="100" r="50" fill="red" />
  </g>
  <!-- 蓝色圆绕自身中心旋转30度 -->
  <g transform="rotate(30, 250, 250)">
    <circle cx="250" cy="250" r="50" fill="blue" />
  </g>
</svg>

这里第二种写法更直接：rotate(角度, 圆心x坐标, 圆心y坐标)，直接在旋转函数里指定圆心，连<g>其实都可以省略（不过套<g>更便于后续给元素加其他变换）。

方法2：正确设置transform-origin为元素自身的中心 #

如果你一定要用CSS的transform-origin，得把它设置为相对于元素自身的百分比或具体坐标：

circle {
  /* 相对于元素自身边界框的中心，对圆来说就是圆心 */
  transform-origin: 50% 50%;
  transform: rotate(45deg);
}

如果遇到旧浏览器兼容性问题，也可以直接写圆心的具体坐标值（比如圆的cx="100"、cy="100"，就写transform-origin: 100px 100px;）。

额外注意：SVG的viewBox影响 #

如果你的SVG设置了viewBox，坐标系会基于viewBox的范围，但上面两种方法依然有效——百分比是相对于元素自身，指定具体坐标时对应viewBox里的数值就行，不用额外调整。

总结一下，最推荐的是方法1，既能保证兼容性，也方便后续维护多个元素的变换。

内容的提问来源于stack exchange，提问作者Yuki.kuroshita