JavaScript中的SVG无法正确呈现

Question

我正在向地图添加点，这些点对应于世界各地的推文。添加推文时，它将用红点表示。

在接下来的30秒内（与推文轮询延迟相同的间隔），点会慢慢淡入黑色，表明它们已经老了。

以下代码就是这样做的，但是在第一次轮询之后，后续的民意调查会将地图上所有点的颜色（新旧）更改为红色。此外，衰落动画仅在映射第一组点时发生。

任何想法为什么？

Here's the map in action. View in a modern browser.

function addCircle(coordinates, tipText, r) {
    tweetNumber++;

    // Max number of dots on a map at any given time
    if (tweetNumber == 200) {
        tweetNumber = 0;
    }

    // Removes expired circles 
    $('#' + tweetNumber).remove();

    var rad;
    //determine if radius size needs to be bumped
    if (arguments.length == 3) {
        rad = r;
    } else {
        rad = 3;
    }

    // Add radar-style ping effect
    map.append('svg:circle')
        .style("stroke", "rgba(255,49,49,.7)")
        .style("fill", "rgba(0,0,0,0)")
        .attr("cx", coordinates[0])
        .attr("cy", coordinates[1])
        .attr("r", 3)
        .transition()
        .delay(0)
        .duration(2000)
        .attr("r", 30)
        .style("stroke", "rgba(255,49,49,0.0001)").transition().duration(2000).remove();

    // Add circles representing tweets
    map.append('svg:circle').attr("class", "tweetCircles")
        .attr("id", tweetNumber)
        .style("fill", "rgba(240,49,49,1)")
        .attr("cx", coordinates[0])
        .attr("cy", coordinates[1])
        .attr("r", rad)
            .append("svg:animate") // Fade effect (only works 1st time)
                .attr("attributeName", "fill")
                .attr("from", "rgba(255,0,0,1)")
                .attr("to", "rgba(0,0,0,1)")
                .attr("dur", "30s");

    // Adds a tooltip to each dot to read the tweets
    addTipsy(tipText, tweetNumber);
}