在添加到畫布後，淡入淡出/改變SVG Shape的顏色？

Question

我創建了一個SVG地圖，用於繪製包含特定關鍵字的tweet信息。我將每條推文作爲一個圓圈（或圓點）繪製到屏幕上，並且在地圖上添加了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秒？

Answer 1

追加一個animate元素作爲圈

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

的孩子這會從紅色插值到您選擇藍色或者其他顏色。