如何旋转 svg 圆圈？

Question

我试图让这个图标像这样旋转：https://www.youtube.com/watch?v=Y61pjmWLSn8

目前图标到处移动。如何让图标像视频一样旋转？

path {
  transform-origin: 50px 50px;
   animation-duration: 3s;
    animation-name: rotate;
    animation-iteration-count: infinite;
}



@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 1067.04 677.07">    
    <path class=""
        d="M164.41,202.61A52.49,52.49,0,0,0,149.93,201l-7.83-8.2L134.5,195l-8.29,2.39-1.58,10.92a52.37,52.37,0,0,0-11.4,9.07l-11.17-.56-4,7.23-.76,1.37-.75,1.36-4,7.23L99,243.14a52.38,52.38,0,0,0-1.63,14.47L89,264.77l2.39,8.28,2.19,7.61,11.12,2.26a52.31,52.31,0,0,0,9.07,11.39l-1.28,10.78,8,4.39,7.95,4.39,8.44-6.82a52,52,0,0,0,14.47,1.62l7.83,8.21,7.61-2.19L175,312.3l1.58-10.92A52.3,52.3,0,0,0,188,292.3l11.17.57,4-7.23.76-1.37.75-1.37,4-7.22-6.42-9.16a52.45,52.45,0,0,0,1.62-14.47l8.41-7.16-2.39-8.28L207.66,229l-11.12-2.26a52.12,52.12,0,0,0-9.08-11.4l1.28-10.77-8-4.39-7.95-4.39Zm21.12,69.74q-.37.69-.78,1.35c-.23.47-.47.93-.73,1.38a39.05,39.05,0,1,1-68.36-37.77q.38-.69.78-1.35c.23-.47.48-.93.73-1.39a39.05,39.05,0,0,1,68.36,37.78Z"
        />
  
</svg>

Answer 1

像这样使用 transform-box: fill-box 和 transform-origin:50% 50%：

svg {
  height: 100vh;
}

path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1067.04 677.07">    
    <path class=""
        d="M164.41,202.61A52.49,52.49,0,0,0,149.93,201l-7.83-8.2L134.5,195l-8.29,2.39-1.58,10.92a52.37,52.37,0,0,0-11.4,9.07l-11.17-.56-4,7.23-.76,1.37-.75,1.36-4,7.23L99,243.14a52.38,52.38,0,0,0-1.63,14.47L89,264.77l2.39,8.28,2.19,7.61,11.12,2.26a52.31,52.31,0,0,0,9.07,11.39l-1.28,10.78,8,4.39,7.95,4.39,8.44-6.82a52,52,0,0,0,14.47,1.62l7.83,8.21,7.61-2.19L175,312.3l1.58-10.92A52.3,52.3,0,0,0,188,292.3l11.17.57,4-7.23.76-1.37.75-1.37,4-7.22-6.42-9.16a52.45,52.45,0,0,0,1.62-14.47l8.41-7.16-2.39-8.28L207.66,229l-11.12-2.26a52.12,52.12,0,0,0-9.08-11.4l1.28-10.77-8-4.39-7.95-4.39Zm21.12,69.74q-.37.69-.78,1.35c-.23.47-.47.93-.73,1.38a39.05,39.05,0,1,1-68.36-37.77q.38-.69.78-1.35c.23-.47.48-.93.73-1.39a39.05,39.05,0,0,1,68.36,37.78Z"
        />
  
</svg>

Answer 2

如果您使用中间带有图标的小图片，您可以为整个图片设置动画。

img {
  transform-origin: center center;
  animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
}



@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<img src="https://fonts.gstatic.com/s/i/materialiconssharp/settings/v17/24px.svg" width="24" height="24">

Answer 3

你的 svg 框太大了。如果你给它一个黑色的边框，你会看到整个盒子在旋转，而不是路径。为了使其工作，您可以减小 svg 的大小，以完全适合我为您完成的齿轮。

希望对您有所帮助

我已经为你创建了一个代码笔https://codepen.io/OSquiddy/pen/QWvrrGe

编辑：

您可以使用 transform-box: fill-box，正如其他人所建议的，但这并不能解决您的 svg 占据的位置超过您需要的问题。如果您尝试减小 <svg> 的尺寸，那么您内部的路径也会缩小。

像我一样做，即。要使 svg 完美适合您的内容，请使用像 Figma 这样的工具，它类似于 Adobe XD/Illustrator 的免费版本。非常适合修改和创建 SVG。只需复制您的 svg> 标签内容并将其粘贴到那里。然后 select 只有您需要的项目，而不是整个框架，右键单击并 select 'Copy as SVG'。这将为您提供完美贴合的 SVG。

如何旋转 svg 圆圈？

How to rotate svg circle in place?

html

css

animation

svg

css-animations