캔버스에 추가 된 후 시간이 지남에 따라 SVG 도형의 색을 변색/변경합니까?

Question

나는 특정 키워드를 포함하고있는 트윗을 살고있는 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 초 동안 색상을 감쇠시킬 수 있습니까?

Answer 1

이 당신이 선택 청색 또는 어떤 색상이 적색에서 보간됩니다 원

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

의 자식 같은 animate 요소를 추가합니다.