使用 CSS 将 SVG 图标的路径动画化以从中心顺时针旋转

Question

我正在尝试旋转/旋转此 SVG 的内部路径，使其顺时针旋转。

是否有任何好的资源可以展示 CSS 可用的不同类型的动画方法？

现在路径正在旋转，就像绕着一个更大的圆圈一样。如何从中心点旋转图标并顺时针旋转？

  #circle-arrows {
    animation: loader 1.25s infinite;
  }

  @keyframes loader {
    0% {
      rotate: 0deg;
    }

    100% {
      border-radius: 50%;
      rotate: 180deg;
    }
  }

<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>

Answer 1

正如@enxaneta所说，将

transform-origin: center

添加到

#circle-arrows

。

#circle-arrows {
    animation: loader 1.25s infinite;
  }

  @keyframes loader {
    0% {
      rotate: 0deg;
    }

    100% {
      border-radius: 50%;
      rotate: 180deg;
    }
  }

<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" transform-origin="center"/>
    </g>
  </svg>