Object 将SVG形状添加到画布后，是否会随时间而褪色/更改其颜色？

我已经创建了一个SVG地图，可以实时绘制包含特定关键字的推文。我把每条推文画成一个圆圈（或圆点），在地图上添加50条推文后，最老的一条将消失

我想根据圆圈在地图上出现的时间长短对其进行某种颜色衰减。

新的推文会出现在地图上，并且是红色的。随着时间的推移，地图上已经绘制的点将慢慢变为黑色

在这里，我将圆添加到地图：

function mapTweet(tweetData) {
    var tipText; // Ignore this. For tweet dot hovering.
    var coordinates = projection([tweetData.geo.coordinates[1], tweetData.geo.coordinates[0]]);

    addCircle(coordinates, tipText);
}

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

    // too many tweets
    if (tweetNumber == 50) {
        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("stroke-width", 1)
        .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", 60)
        .style("stroke-width", 2)
        .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("stroke", "rgba(255,49,49,.7)")
        .style("stroke-width", 1)
        .style("fill", "rgba(240,49,49,1)")
        .attr('cx', coordinates[0])
        .attr('cy', coordinates[1])
        .attr('r', rad);

    addTipsy(tipText, tweetNumber); // Ignore this. For tweet dot hovering.
}

一旦画出一个圆，是否必须重新绘制以更改颜色？或者点在添加到画布后可以更改其属性吗

如何在20秒内衰减颜色？

将元素附加为圆的子元素

.append('svg:animate')
  .attr('attributeName', 'fill')
  .attr('from', 'red')
  .attr('to', 'blue')
  .attr('dur', '20s');

---

这将从红色插值到蓝色或您选择的任何颜色。

我不确定在何处添加此选项。我是否只是将它钉在附加svg:circle的末尾？