如何将svg圆旋转到位？ [复制]答案

【问题标题】：How to rotate svg circle in place? [duplicate]如何将svg圆旋转到位？ [复制]
【发布时间】：2021-10-06 05:29:33
【问题描述】：

我试图让这个图标像这样旋转：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>

【问题讨论】：

标签： html css animation svg css-animations

【解决方案1】：

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

希望对你有帮助

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

编辑：

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

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

【讨论】：

【解决方案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);
  }
}

&lt;img src="https://fonts.gstatic.com/s/i/materialiconssharp/settings/v17/24px.svg" width="24" height="24"&gt;

【讨论】：

【解决方案3】：

像这样使用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>

【讨论】：