基于HTML/CSS/JavaScript实现SVG路径环绕旋转动画

为啥你之前用CSS rotate没成？ #

多半是旋转中心没设对——默认旋转中心是SVG元素的左上角，不是圆形的圆心，所以曲线转起来就偏离圆形了。

方案一：用SVG自带动画（推荐，不用额外写CSS） #

直接在SVG里给曲线单独分组，加个animateTransform就能实现无限旋转，还不影响静态的圆形：

修改后的完整SVG代码：

<svg width="156" height="142" viewBox="0 0 156 142" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 静态的两个圆，单独放一组 -->
  <g>
    <path d="M144.094 67.4748C144.094 75.9193 142.43 84.2811 139.197 92.0827C135.965 99.8842 131.226 106.973 125.253 112.943C119.28 118.913 112.189 123.649 104.385 126.879C96.5816 130.109 88.2177 131.771 79.7716 131.768C44.2485 131.768 12.9238 101.745 12.9238 66.1794C12.9238 30.6139 48.0205 0.410156 83.5437 0.410156C119.067 0.410156 144.094 31.942 144.094 67.4748Z" fill="#E1E8EB"/>
    <path d="M78.6071 106.451C99.7205 106.451 116.836 89.3382 116.836 68.2288C116.836 47.1194 99.7205 30.0068 78.6071 30.0068C57.4937 30.0068 40.3779 47.1194 40.3779 68.2288C40.3779 89.3382 57.4937 106.451 78.6071 106.451Z" fill="#FF7C04"/>
  </g>
  <!-- 要旋转的曲线组，加动画 -->
  <g>
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 78.5 66.1"
      to="360 78.5 66.1"
      dur="8s"
      repeatCount="indefinite"
    />
    <path d="M2.42712 52.3071C2.42712 52.3071 -8.97112 118.683 54.695 140.344" stroke="#343A40" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
    <path d="M125.151 1.63965C126.644 1.63965 157.148 26.1207 154.147 66.048" stroke="#343A40" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
  </g>
</svg>

要注意的点：

• 把静态圆和旋转曲线分成两组，避免圆跟着转
• from和to里的78.5 66.1是两个圆的中心坐标（计算得出，和实际圆心基本重合）
• dur是旋转一圈的时间，数字越小转得越快
• repeatCount="indefinite"就是让它一直循环旋转

方案二：用CSS动画实现 #

如果习惯用CSS，给曲线组加类名，然后设置正确的旋转中心即可：

第一步：修改SVG结构，给曲线组加类 #

<svg width="156" height="142" viewBox="0 0 156 142" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="M144.094 67.4748C144.094 75.9193 142.43 84.2811 139.197 92.0827C135.965 99.8842 131.226 106.973 125.253 112.943C119.28 118.913 112.189 123.649 104.385 126.879C96.5816 130.109 88.2177 131.771 79.7716 131.768C44.2485 131.768 12.9238 101.745 12.9238 66.1794C12.9238 30.6139 48.0205 0.410156 83.5437 0.410156C119.067 0.410156 144.094 31.942 144.094 67.4748Z" fill="#E1E8EB"/>
    <path d="M78.6071 106.451C99.7205 106.451 116.836 89.3382 116.836 68.2288C116.836 47.1194 99.7205 30.0068 78.6071 30.0068C57.4937 30.0068 40.3779 47.1194 40.3779 68.2288C40.3779 89.3382 57.4937 106.451 78.6071 106.451Z" fill="#FF7C04"/>
  </g>
  <!-- 给曲线组加类名，方便CSS选择 -->
  <g class="rotating-curves">
    <path d="M2.42712 52.3071C2.42712 52.3071 -8.97112 118.683 54.695 140.344" stroke="#343A40" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
    <path d="M125.151 1.63965C126.644 1.63965 157.148 26.1207 154.147 66.048" stroke="#343A40" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
  </g>
</svg>

第二步：编写CSS动画 #

.rotating-curves {
  /* 重点！旋转中心设为SVG内部的圆心坐标，不是页面像素 */
  transform-origin: 78.5px 66.1px;
  /* 动画：旋转，8秒一圈，匀速，无限循环 */
  animation: rotate 8s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

要注意的点：

• transform-origin的数值是SVG viewBox里的坐标，不是页面上的像素位置，别搞混
• linear保证旋转速度均匀，不会忽快忽慢

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