使用CSS实现SVG图标内部路径绕中心顺时针旋转动画

你遇到的问题是因为CSS旋转默认以元素左上角为原点，而非SVG图标的中心点，导致路径旋转时偏移成大圆周轨迹。以下是修复方法：

核心修改点 #

• 给目标路径设置transform-origin: 50% 50%，将旋转原点定位到SVG的中心点
• 移除动画中不必要的border-radius属性（路径本身是箭头形状，该属性无意义）

修改后的代码 #

CSS部分 #

#circle-arrows {
  animation: loader 1.25s infinite linear; /* 添加linear让旋转匀速 */
  transform-origin: 50% 50%; /* 关键：设置旋转原点为中心点 */
}

@keyframes loader {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg; /* 若需完整旋转一周用360deg，保留180deg则为半圈旋转 */
  }
}

SVG部分（无需修改，保持原结构即可） #

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd">
      <path d="M0 0h24v24H0z" />
      <path
        d="M23 14.864C23 17.696 20.737 20 17.956 20c-.11 0-.236 0-.346-.016V20H6.044c-.11 0-.22 0-.33-.016C3.09 19.808 1 17.584 1 14.864c0-2.16 1.304-4.016 3.159-4.784.157-2.512 2.2-4.48 4.698-4.48.487 0 .959.08 1.399.224h.015A4.993 4.993 0 0 1 14.137 4c2.782 0 5.044 2.304 5.044 5.136 0 .24-.015.48-.062.72C21.35 10.4 23 12.432 23 14.864z"
        fill="#000" fill-rule="nonzero" />
      <path id="circle-arrows"
        d="M16.348 12.98c-.499 2.072-2.209 3.52-4.372 3.52a4.492 4.492 0 0 1-3.082-1.243l-.755.757a.376.376 0 0 1-.264.111.378.378 0 0 1-.375-.375v-2.625c0-.205.17-.375.375-.375H10.5c.205 0 .375.17.375.375 0 .1-.04.193-.11.264l-.804.802a2.991 2.991 0 0 0 4.594-.62c.14-.23.21-.452.31-.687.03-.082.087-.134.176-.134h1.125c.106 0 .187.088.187.187 0 .013 0 .03-.005.042zm.152-2.105c0 .205-.17.375-.375.375H13.5a.378.378 0 0 1-.375-.375c0-.1.04-.193.11-.264l.81-.809A3.016 3.016 0 0 0 12 9c-1.043 0-2.01.539-2.555 1.43-.14.229-.21.451-.31.686-.03-.082-.087-.134-.176-.134H7.793a.189.189 0 0 1-.187-.187v-.042C8.11 8.94 9.838 7.5 12 7.5c1.149 0 2.267.457 3.099 1.243l.762-.757a.376.376 0 0 1 .264-.111c.205 0 .375.17.375.375v2.625z"
        fill="#FFF" fill-rule="nonzero" />
    </g>
</svg>

额外说明 #

• 动画中添加linear关键字可以让旋转速度保持匀速，避免快慢变化
• 若需要半圈旋转效果，保留180deg即可；若要完整循环旋转，360deg更符合加载图标的常见表现

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