如何实现实心圆绕轮廓圆旋转？纯CSS/SVG独立SVG方案

不需要引入外部CSS、不需要依赖HTML页面，所有逻辑内联在单个SVG文件中，直接保存为.svg格式即可双击打开查看动画效果。

实现逻辑 #

• 旋转动画以轮廓空心圆的圆心（坐标150,150）为固定旋转中心
• 用SVG原生支持的SMIL动画标签实现效果，兼容性覆盖所有主流浏览器，不需要额外写样式
• 将需要做旋转运动的实心圆单独放在分组标签内，避免动画影响外层的空心轮廓圆

完整可用代码 #

<svg width="300" height="300" style="border: 1px solid black" xmlns="http://www.w3.org/2000/svg">
  <!-- 空心轮廓圆 固定不动 -->
  <circle stroke="black" stroke-width="1" r="100" cx="150" cy="150" fill="white"></circle>
  <!-- 旋转运动分组 旋转中心设为空心圆圆心 -->
  <g>
    <!-- 实心运动小圆 -->
    <circle r="10" cx="50" cy="150" fill="black"></circle>
    <!-- 旋转动画配置 -->
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 150 150"
      to="360 150 150"
      dur="4s"
      repeatCount="indefinite"
    />
  </g>
</svg>

参数调整说明 #

• 调整动画速度：修改dur属性值，数值越小旋转越快，比如dur="2s"就是2秒转一圈
• 调整旋转方向：把from和to的角度值对调，比如from="360 150 150" to="0 150 150"就是反向旋转
• 调整旋转圈数：如果不需要无限循环，把repeatCount改成具体数字即可，比如repeatCount="3"就是转3圈后停止

注意：必须给SVG根标签加上xmlns="http://www.w3.org/2000/svg"命名空间，否则本地直接打开SVG文件时可能无法正常渲染。

内容的提问来源于stack exchange，提问作者c136