html - 如何将svg圆旋转到位?
问题描述
我试图让这个图标像这样旋转: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>
解决方案
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>
推荐阅读
- flutter - 绘制带有卡片列表的下拉菜单
- google-apps-script - 从电子表格创建 PDF 需要将 PDF URL 返回到电子表格
- php - 如何删除最后一个
在 Codeigniter 的 foreach 循环中标记? - python - 如何同时使用 args 和 Question 参数
- python - reticulate [R] 的配置/安装问题
- javascript - 如何使用 jquery 在 datalist 中仅采用最后五个选项并清除 datalist 中的所有其他选项?
- ionic-framework - 离子幻灯片显示低于 ionic 5
- java - 春季启动 - restTemplate.postForObject - 参数为空
- ruby-on-rails - 升级到 ruby 3/rails 6.1 后应用程序无法访问(提供了演示应用程序)
- segmentation-fault - 相同的错误代码在 mpiexec 时重复多次