Css 让svg在悬停时正确旋转

我试图让svg的圆形线条从svg的中心点旋转。在那一刻，它在它的轴上旋转，这不是我想要发生的。有没有办法解决这个问题

这是我的代码：

线条{ 动画：逆时针旋转30秒无限线性； 动画播放状态：暂停； } svg：悬停线{ 动画播放状态：运行； } @关键帧逆时针旋转{ 0% { 变换：旋转360度； } 100% { 变换：旋转0度； } }

---

与HTML元素不同，SVG元素的默认值为0左上角。您需要设置变换原点：中心；在线：

线条{ 动画：逆时针旋转30秒无限线性； 动画播放状态：暂停； 变换原点：中心； } svg：悬停线{ 动画播放状态：运行； } @关键帧逆时针旋转{ 0% { 变换：旋转360度； } 100% { 变换：旋转0度； } } @关键帧逆时针旋转{ 0% { 变换：旋转360度； } 100% { 变换：旋转0度； } }

---

奇怪的是，我正要开始玩transform origin。谢谢你的提醒。