animation - svg 同步动画元素

Question

我需要为 6 个动态创建的 svg 圆圈设置动画，这些圆圈彼此间隔 1 秒。它们应该以黄色渐变开始，并在 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();

这是一个链接，可以查看发生了什么。 http://jsfiddle.net/cpUbS/2/

知道我错过了什么吗？谢谢!

Answer 1

SVG 文档有一个时间线，默认情况下从 0 秒开始，当第一个要动画的东西被创建时，然后递增。

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

增加每个元素的开始，以便它们从您希望的时间轴开始。