如何实现SVG路径上圆形与眼睛的无限旋转并替换粉色圆

修改要点 #

• 移除多余的外部div元素，直接使用SVG内的粉色圆形和眼睛组件
• 将粉色圆与眼睛合并到同一组，确保两者同步运动
• 将动画从往返模式改为单向无限循环
• 绑定第一个灰色圆形的路径作为运动轨迹，调整定位让元素贴合路径

完整代码 #

HTML部分

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1339.88" height="1339.88" viewBox="0 0 1339.88 1339.88">
     <defs>
      <clipPath id="clip-path">
      <rect id="Rectangle_119" data-name="Rectangle 119" width="721.865" height="1173.012" fill="none" stroke="#acb4ae" stroke-width="1"/>
      </clipPath>
      <clipPath id="clip-path-2">
      <rect id="Rectangle_527" data-name="Rectangle 527" width="130.25" height="130.225" fill="none" stroke="#b4b4b4" stroke-width="1"/>
      </clipPath>
    </defs>
    <g id="Sekcja_2" data-name="Sekcja 2" transform="translate(-300.09 -1206.12)">
      <g id="Group_397" data-name="Group 397" transform="translate(300.09 1716.556) rotate(-45)" opacity="0.276">
        <g id="Group_79" data-name="Group 79" clip-path="url(#clip-path)">
        <path id="Path_365" data-name="Path 365" d="M366.307,583.8c0,322.145-81.9,583.3-182.9,583.3S.5,905.94.5,583.8a1782.186,1782.186,0,0,1,9.4-185.08C34.193,167.219,102.7.5,183.407.5,284.409.5,366.307,261.65,366.307,583.8Z" transform="translate(2.711 2.711)" fill="none" stroke="#acb4ae" stroke-miterlimit="10" stroke-width="1"/>
        <path id="Path_366" data-name="Path 366" d="M393.529,583.8c0,322.145-81.891,583.3-182.9,583.3S27.722,905.94,27.722,583.8,109.613.5,210.629.5,393.529,261.65,393.529,583.8Z" transform="translate(150.304 2.711)" fill="none" stroke="#acb4ae" stroke-miterlimit="10" stroke-width="1"/>
        <path id="Path_367" data-name="Path 367" d="M420.752,583.8c0,322.145-81.885,583.3-182.9,583.3S54.945,905.94,54.945,583.8,136.836.5,237.852.5,420.752,261.65,420.752,583.8Z" transform="translate(297.902 2.711)" fill="none" stroke="#acb4ae" stroke-miterlimit="10" stroke-width="1"/>
      </g>
    </g>
    <!-- 合并粉色圆与眼睛到同一动画组 -->
    <g class="moving-group">
      <circle id="Ellipse_6" data-name="Ellipse 6" cx="10" cy="10" r="10" fill="#da2e68"/>
      <g id="Group_452" data-name="Group 452" transform="translate(-1627.676 1629.774)">
        <g id="Group_442" data-name="Group 442" transform="translate(1637.676 391)">
          <g id="Group_441" data-name="Group 441" clip-path="url(#clip-path-2)">
            <g id="Ellipse_29" data-name="Ellipse 29" transform="translate(3.439 3.427)" fill="#fff" stroke="#aab5ad" stroke-width="1">
              <circle cx="61.686" cy="61.686" r="61.686" stroke="none"/>
              <circle cx="61.686" cy="61.686" r="61.186" fill="none"/>
            </g>
            <path id="Path_1161" data-name="Path 1161" d="M16.351,0A16.351,16.351,0,1,1,0,16.351,16.351,16.351,0,0,1,16.351,0Z" transform="translate(48.774 48.762)" fill="#fff"/>
            <path id="Union_1" data-name="Union 1" d="M.408,35.239H0a70.5,70.5,0,0,1,122.1,0h.133a70.449,70.449,0,0,1-61.18,35.467C34.975,70.706,12.6,56.29.408,35.239Z" transform="translate(4.062 29.304)" fill="none" stroke="#b4b4b4" stroke-width="1"/>
            <path id="Path_1159" data-name="Path 1159" d="M66.2,94.029a27.783,27.783,0,1,1,10.9-2.2,28.012,28.012,0,0,1-10.9,2.2m0-43.051h0c-1.193,4.678-2.3,7.807-4.446,9.949s-5.272,3.252-9.95,4.444c4.679,1.193,7.808,2.3,9.95,4.447s3.253,5.271,4.446,9.95c1.192-4.678,2.3-7.807,4.444-9.95s5.271-3.253,9.95-4.447c-4.679-1.192-7.808-2.3-9.95-4.444s-3.252-5.272-4.444-9.949" transform="translate(-1.215 -1.212)" fill="#9bd698"/>
          </g>
        </g>
      </g>
    </g>
    </g>
</svg>

CSS部分

.moving-group {
  offset-path: path('M366.307,583.8c0,322.145-81.9,583.3-182.9,583.3S.5,905.94.5,583.8a1782.186,1782.186,0,0,1,9.4-185.08C34.193,167.219,102.7.5,183.407.5,284.409.5,366.307,261.65,366.307,583.8Z');
  offset-distance: 0%;
  /* 移除alternate，实现单向无限循环 */
  animation: rotate-around 5s linear infinite;
  /* 调整偏移让元素中心对齐路径轨迹 */
  transform: translate(-50%, -50%);
}

@keyframes rotate-around {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

关键说明 #

• 合并元素到同一组后，动画会同步作用于粉色圆和眼睛，避免错位
• 移除alternate参数后，动画会沿路径单向循环，不会往返弹跳
• 使用translate(-50%, -50%)修正元素定位，确保贴合路径中心
• 直接使用SVG内部元素，避免外部div与SVG的定位冲突

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