SVG动画不能在Firefox和Safari上工作

Question

制作圆形饼状图，比如动画。在Chrome上可以完美地工作，但在Firefox上没有动画，而在safari上根本不显示。

你知道是什么问题吗?

https://codepen.io/jamalfaiez/pen/zYwVKPq

<div class="circle_anim rndm_01 rndm_rotate_03">
<svg version="1.1" viewBox="0 0 285 284">
<g class="circles">
<circle cx="142" cy="142" r="142"></circle>
<circle cx="142" cy="142" r="137"></circle>
<circle cx="142" cy="142" r="137"></circle>
<circle cx="142" cy="142" r="137"></circle>
<circle cx="142" cy="142" r="137"></circle>
<circle cx="142" cy="142" r="137"></circle>
<circle cx="142" cy="142" r="137"></circle>
</g>
</svg>
</div>

Answer 1

从.circle_anim中删除display: flex恢复了我的大部分可视化

.circle_anim {
position: relative;
width: 285px;
/* display: flex; */
justify-content: center;
align-items: center;
}