Я думаю, что этот вариант использования слишком сложен для стандартной функции анимации.
Я бы предложил использовать немного Javascript.
var circleElements = document.querySelectorAll("svg circle");
var animateElements = document.querySelectorAll("svg animate");
var currentIndex = -1;
var timeoutHandle = null;
circleElements.forEach(function(elem, index) {
// Add a click event listener to all the circles
elem.addEventListener("click", function(evt) {
circleClick(index);
});
});
function circleClick(index) {
// A circle has been clicked on
currentIndex = index;
// Trigger the animation of this circle
animateElements.item(currentIndex).beginElement();
// Clear any timeout that is running
clearTimeout(timeoutHandle);
// Start a new timeout which, when it expires, will trigger the animation on the next circle
timeoutHandle = setTimeout(function() {
nextCircle();
}, 1000);
}
function nextCircle() {
// We have been called by a timeout.
// Incement the index
currentIndex++;
if (currentIndex < animateElements.length) {
// If we are not yet at the last circle, trigger the animation on the new circle
animateElements.item(currentIndex).beginElement();
// Start a timeout for the circle after this one.
timeoutHandle = setTimeout(function() {
nextCircle();
}, 1000);
}
}
// Start animating right away with the first circle
circleClick(0);
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 480" enable-background="new 0 0 640 480" xml:space="preserve">
<defs>
<animate id="1p_anim" xlink:href="#_1p-circle" attributeName="stroke-dashoffset" begin="indefinite" values="600; 0"
restart="always"
dur="2s" repeatCount="1"
fill="remove"
calcMode="linear"
stroke-opacity="1"
/>
<animate id="2p_anim" xlink:href="#_2p-circle" attributeName="stroke-dashoffset" begin="indefinite" values="600; 0"
restart="always"
dur="1s" repeatCount="1"
fill="remove"
calcMode="linear"
stroke-opacity="1"
/>
<animate id="3p_anim" xlink:href="#_3p-circle" attributeName="stroke-dashoffset" begin="indefinite" values="600; 0"
restart="always"
dur="2s" repeatCount="1"
fill="remove"
calcMode="linear"
stroke-opacity="1"
/>
<animate id="4p_anim" xlink:href="#_4p-circle" attributeName="stroke-dashoffset" begin="indefinite" values="600; 0"
restart="always"
dur="2s" repeatCount="1"
fill="remove"
calcMode="linear"
stroke-opacity="1"
/>
<animate id="5p_anim" xlink:href="#_5p-circle" attributeName="stroke-dashoffset" begin="indefinite" values="600; 0"
restart="always"
dur="2s" repeatCount="1"
fill="remove"
calcMode="linear"
stroke-opacity="1"
/>
<animate id="6p_anim" xlink:href="#_6p-circle" attributeName="stroke-dashoffset" begin="indefinite" values="600; 0"
restart="always"
dur="2s" repeatCount="1"
fill="remove"
calcMode="linear"
stroke-opacity="1"
/>
</defs>
<g id="1p">
<circle id="_1p-circle" stroke-dasharray= "600" stroke-dashoffset="0" stroke="#000" fill="#fff" cx="103.5" cy="194.5" r="20"/>
</g>
<g id="2p">
<circle id="_2p-circle" stroke-dasharray= "600" stroke-dashoffset="0" stroke="#000" fill="#FFFFFF" cx="158.5" cy="194.5" r="20"/>
</g>
<g id="3p">
<circle id="_3p-circle" stroke-dasharray= "600" stroke-dashoffset="0" stroke="#000" fill="#FFFFFF" cx="210.5" cy="194.5" r="20"/>
</g>
<g id="4p">
<circle id="_4p-circle" stroke-dasharray= "600" stroke-dashoffset="0" stroke="#000" fill="#FFFFFF" cx="262.5" cy="194.5" r="20"/>
</g>
<g id="5p">
<circle id="_5p-circle" stroke-dasharray= "600" stroke-dashoffset="0" stroke="#000" fill="#FFFFFF" cx="314.5" cy="194.5" r="20"/>
</g>
<g id="6p">
<circle id="_6p-circle" stroke-dasharray= "600" stroke-dashoffset="0" stroke="#000" fill="#FFFFFF" cx="366.5" cy="194.5" r="20"/>
</g>
</svg>