0

我创建了一个 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 秒内衰减颜色？

4

1 回答 1

0

附加一个动画元素作为圆的子元素

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

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

于 2013-01-11T22:32:35.633 回答