Animation svg同步动画元素

我需要设置6个svg圆圈的动画，这些圆圈是从彼此动态创建的。 它们应该以黄色渐变开始，并在6秒内逐渐变为红色渐变。 但是，它们不是在创建时以黄色开始，而是采用第一个元素当时的值，因此它们最终都显示相同的同步动画。 这就是我正在做的：

 var svgElem = document.getElementById('svgElem');
var svgDefs = document.getElementById('svgDefs');
var count = 0;
function createNewElement(){
    var rnd;

    rnd = Math.floor(Math.random()*6);
    rnd = 0;
    createRadialAnimation(count, rnd);

    var circle = document.createElementNS(svgElem.namespaceURI,'circle');
    circle.setAttribute('cx', 100+Math.floor(Math.random()*300));
    circle.setAttribute('cy', 100+Math.floor(Math.random()*300));
    circle.setAttribute('r', 10);
    circle.setAttribute('fill','url(#grad'+count+')');
    var animate = document.createElementNS(svgElem.namespaceURI,'animate');
    animate.setAttribute('attributeName', 'r');
    animate.setAttribute('from', '10');
    animate.setAttribute('to', '10');
    animate.setAttribute('repeatCount', 'indefinite');
    animate.setAttribute('fill', 'freeze');
    animate.setAttribute('dur', '6s');
    animate.setAttribute('begin', rnd+'s');
    circle.appendChild(animate);
    svgElem.appendChild(circle);

    count +=1;
    if(count<6){
        setTimeout(createNewElement, 2000);
    }
}

function createRadialAnimation(num, rnd){
    var radialG = document.createElementNS(svgElem.namespaceURI,'radialGradient');
    radialG.setAttribute('id', 'grad'+num);
    radialG.setAttribute('cx', '50%');
    radialG.setAttribute('cy', '50%');
    radialG.setAttribute('r', '50%');
    radialG.setAttribute('fx', '50%');
    radialG.setAttribute('fy', '50%');
    var stop = document.createElementNS(svgElem.namespaceURI,'stop');
    stop.setAttribute('offset', '0%');
    stop.setAttribute('stop-color', 'rgb(255,228,129)');
    stop.setAttribute('stop-opacity', '0');
    radialG.appendChild(stop);
    stop = document.createElementNS(svgElem.namespaceURI,'stop');
    stop.setAttribute('offset', '100%');
    stop.setAttribute('stop-color', 'rgb(211,90,67)');
    stop.setAttribute('stop-opacity', '1');
    radialG.appendChild(stop);
    var animate = document.createElementNS(svgElem.namespaceURI,'animate');
    animate.setAttribute('attributeName', 'stop-color');
    animate.setAttribute('from', 'rgba(255,228,129,1)');
    animate.setAttribute('to', 'rgba(211,90,67,1)');
    animate.setAttribute('repeatCount', 'indefinite');
    animate.setAttribute('dur', '6s');
    animate.setAttribute('begin', rnd+'s');
    animate.setAttribute('fill', 'freeze');
    stop.appendChild(animate);
    animate = document.createElementNS(svgElem.namespaceURI,'animate');
    animate.setAttribute('attributeName', 'stop-opacity');
    animate.setAttribute('from', '1');
    animate.setAttribute('to', '0');
    animate.setAttribute('repeatCount', 'indefinite');
    animate.setAttribute('dur', '6s');
    animate.setAttribute('begin', rnd+'s');
    animate.setAttribute('fill', 'freeze');
    stop.appendChild(animate);

    svgDefs.appendChild(radialG);
}

createNewElement();

var svgElem=document.getElementById（'svgElem'）；
var svgDefs=document.getElementById（'svgDefs'）；
var计数=0；
函数createNewElement（）{
var-rnd；
rnd=Math.floor（Math.random（）*6）；
rnd=0；
CreateRadialImation（计数，rnd）；
var circle=document.createElements（svgElem.namespaceURI，'circle'）；
circle.setAttribute（'cx'，100+数学地板（Math.random（）*300））；
circle.setAttribute（'cy'，100+Math.floor（Math.random（）*300））；
圆圈.setAttribute（'r'，10）；
circle.setAttribute（'fill'，'url（#grad'+count+'）；
var animate=document.createElements（svgElem.namespaceURI，'animate'）；
animate.setAttribute（'attributeName'，'r'）；
animate.setAttribute（'from'，'10'）；
animate.setAttribute（'to'，'10'）；
animate.setAttribute（'repeatCount'，'Undefinite'）；
animate.setAttribute（'fill'，'freeze'）；
animate.setAttribute（'dur'，'6s'）；
animate.setAttribute（'begin'，rnd+'s'）；
圆。追加子对象（动画）；
svgElem.appendChild（圆）；
计数+=1；
如果（countSVG文档有一个时间表，默认情况下，当创建第一个动画时，该时间表从0秒开始，然后递增

您正在以6秒开始创建所有元素，因此当文档时间线达到6秒时，它们都开始同步设置动画

增加每个元素的开始时间，使它们从您希望的时间线的点开始。
谢谢！对于感兴趣的人，您可以使用svgElem.getCurrentTime（）在当前时间线位置设置开始时间