Animation 如何在svg on循环中为动画重新绘制对象？

我对使用SVG还不熟悉，我正在尝试创建3个从屏幕中心依次展开的循环圆圈。我的问题是，当循环发生时，因为第一个圆在它上面画了一些东西，所以它隐藏在其他圆的后面

以下是现行守则：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="470px" height="250px" 
     preserveAspectRatio="xMidYMid">

    <g transform-origin="center" transform="scale(1,1)">
       <g transform-origin = "center" transform="scale(0,0)">
           <animateTransform id = "anim1" attributeName="transform" type="scale"
               from="0,0" to="1,1"
               begin="0s; anim3.end" dur="2.5s" fill="freeze"/>
           <circle cx="235" cy="125" r="275" fill="red"/>
       </g>
       <g transform-origin="center" transform="scale(0,0)">
            <animateTransform id = "anim2" attributeName="transform" type="scale"
                from="0,0" to="1,1"
                begin="anim1.end" dur="2.5s" fill="freeze"/>
            <circle cx="235" cy="125" r="275" fill="blue"/>
        </g>
        <g transform-origin="center" transform="scale(0,0)">
            <animateTransform id = "anim3" attributeName="transform" type="scale"
                from="0,0" to="1,1"
                begin="anim2.end" dur="2.5s" fill="freeze"/>
            <circle cx="235" cy="125" r="275" fill="green"/>
        </g>
    </g>
</svg>

---

当它处于静止状态时，它会正确地设置一次动画，然后最后一个圆每隔几秒钟重新绘制一次，因为其他动画被隐藏。我希望它能为每一个循环在顶部重新铺上圆圈。由于SVG不支持层，在我看来，让第一个圆圈再次出现的最简单方法是在顶部重新绘制它，但我不确定如何做到这一点，我很难弄清楚这一点。任何帮助都将不胜感激。

也许只需删除

fill=“freeze”

---

我正在使用@Alexandr\T答案，我正在添加一个背景

，它会随着

而改变颜色。我希望这就是你想要的效果

感谢您的回复。这是可行的，但我特别想要的是让绿色从蓝色中爆炸出来，红色从绿色中爆炸出来，蓝色从红色中爆炸出来。因此，以前的颜色保留为新背景。此新代码每次都会将背景重置为白色。正如我所说，循环的第一次迭代正是我想要的，我只希望它继续而不是中断。归根结底，这一点并不是那么重要，我只是有点好奇，一个人怎么做才是最重要的。@Myrnedraith我理解你。我将继续寻找解决办法。谢谢你提出的这个有趣的问题。漂亮的决定我也考虑过这样的决定。但首先我决定搜索是否有其他svg属性最完美，谢谢。我使用了你的答案，但在开始时改变了背景-.01，以消除每个圆圈后的轻微口吃。非常感谢。