jquery - JavaScript の SVG が正しくレンダリングされない

Question

世界中のツイートに対応するマップにドットを追加しています。ツイートが追加されると、赤い点で表されます。

次の 30 秒間 (ツイートのポーリング遅延と同じ間隔) で、ドットはゆっくりと黒くなり、古いことを示します。

次のコードはまさにそれを行いますが、最初のポーリングの後、後続のポーリングでは、マップ上のすべてのドットの色が、新旧の両方で赤に変更されます。さらに、フェード アニメーションは、最初のポイント セットがマップされたときにのみ発生します。

理由はありますか？

これが実際のマップです。最新のブラウザで表示します。

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);
}