Animation SVG关键时刻行为

我正在制作一个动画SVG甜甜圈图表。目前我最好的尝试是。但这并不是我想要的。我希望元素在开始时出现，然后在屏幕上出现另一个元素之前淡出，然后等待所有其他元素出现并淡出，然后从第一个元素再次开始此循环。如您所见，现在元素一起淡入/淡出，只有它们的动画开始时间不同。我在中尝试了值/关键时间属性。但是动画在我所知道的任何浏览器中都不起作用

以下是第一个SVG中的问题代码：

<animate
    attributeName="opacity"
    begin="0ms" //This is for the first element, for anothers it differs
    //I wish there is `pause` attribute, to pause animation repiting...
    dur="3000ms"
    from="0.7"
    to="0"
    repeatCount="indefinite"/>

---

几乎就是我想要的，但我需要动画来重复。
问题是
关键时刻
和
值
属性中的逗号-需要使用分号并读取文档两次

<animate
    attributeName="opacity"
    begin="0ms"
    keyTimes="0,0.2,1"
    values="0.7,0,0"
    dur="15000ms"
    repeatCount="indefinite"/>