如何原地旋转 svg 圆？

2024-05-20 • 问答

我试图让这个图标像这样旋转：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,149.93,201l-7.83-8.2L134.5,195l-8.29,2.39-1.58,10.92a52.37,52.37,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-1.63,14.47L89,264.77l2.39,8.28,2.19,7.61,11.12,2.26a52.31,52.31,9.07,11.39l-1.28,10.78,8,4.39,7.95,8.44-6.82a52,52,14.47,1.62l7.83,8.21,7.61-2.19L175,312.3l1.58-10.92A52.3,52.3,188,292.3l11.17.57,4-7.23.76-1.37.75-1.37,4-7.22-6.42-9.16a52.45,52.45,1.62-14.47l8.41-7.16-2.39-8.28L207.66,229l-11.12-2.26a52.12,52.12,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,1,1-68.36-37.77q.38-.69.78-1.35c.23-.47.48-.93.73-1.39a39.05,68.36,37.78Z"
        />
  
</svg>

像这样使用 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,149.93,201l-7.83-8.2L134.5,195l-8.29,2.39-1.58,10.92a52.37,52.37,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-1.63,14.47L89,264.77l2.39,8.28,2.19,7.61,11.12,2.26a52.31,52.31,9.07,11.39l-1.28,10.78,8,4.39,7.95,8.44-6.82a52,52,14.47,1.62l7.83,8.21,7.61-2.19L175,312.3l1.58-10.92A52.3,52.3,188,292.3l11.17.57,4-7.23.76-1.37.75-1.37,4-7.22-6.42-9.16a52.45,52.45,1.62-14.47l8.41-7.16-2.39-8.28L207.66,229l-11.12-2.26a52.12,52.12,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,1,1-68.36-37.77q.38-.69.78-1.35c.23-.47.48-.93.73-1.39a39.05,68.36,37.78Z"
        />
  
</svg>

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

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

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

希望能帮到你

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

编辑：

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

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

如何原地旋转 svg 圆？

mql7777 回答：如何原地旋转 svg 圆？

大家都在问