Animation SVG动画问题-圆动画偏离中心

请有人检查一下这个代码笔，找出为什么太阳动画不合适，偏离中心

---

在大多数情况下，将

变换框：填充框

放在CSS类中即可。如果您需要更广泛的浏览器支持，只需为特殊浏览器使用单独的CSS类，如Edge，使用像素完美变换原点属性，并使用JS在类之间切换

.modern{
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.edge{
  transform-origin: 52px 34px;
}

---

最好保留摘录代码。。无论如何，您应该将旋转和缩放动画应用于整个svg，而不是其中的每个元素。尝试将动画添加到sun的svg元素中；对于你的g，path，circle，rect{@enxaneta--谢谢，这非常有效。你能把它作为一个答案，我会接受的。

.modern{
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.edge{
  transform-origin: 52px 34px;
}