SVG棘手的keyTimes行为

Question

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

以下是第一个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"/>

如你所见，我试图增加动画持续时间，但结束了此时20％的元素褪色（我有5个要淡化的元素）。但它不起作用。

尝试重新排序属性，使用from和to使用双值keyTimes和长dur，但不起作用。这里肯定有一些狡猾的技巧......

P.S。 This几乎是我想要的，但我需要重复动画。

Answer 1

问题是keyTimes和value属性中的逗号 - 需要使用分号和读取文档两次。