1、做的监控页面需要动画展示数据通道是否畅通，之前手写svg，发现无法加载同一个图片，转向RaphaelJs ，但是RaphaelJs 2.x 不提供
AnimateAlong函数

2、定义一个自定义属性 progress

paper.customAttributes.progress = function (v) {
  var path = this.data("mypath"),
  attrs = this.attr(),
  offset = { x: 0, y: 0 };

  if (!path) {
    return {
    transform: "t0,0r0"
    };
  }

  var startPoint = path.getPointAtLength(0);

  if (attrs.hasOwnProperty("width")) {
    offset.x = -this.attr("width") / 2;
    offset.y = -this.attr("height") / 2;
  }


  var bbox = this.getBBox();

  var len = path.getTotalLength();
  var point = path.getPointAtLength(v * len);
  if (v * len == len) {
    return {
    transform: ""
    }
  }else {
    var deg=0;
    if (point.y > startPoint.y) {
    deg = startPoint.alpha - point.alpha;
    }else{
    deg = point.alpha - startPoint.alpha;
  }

  return {
    transform: "t" + (point.x + offset.x - startPoint.x -bbox.width/2 ) + "," + (point.y + offset.y - startPoint.y ) + "r" + deg
    };
  }
};

3、设置元素动画

var arrow = paper.path("M344,"+((detaInH+unitHeight)/2+i*itemH-3)+"L350,"+((detaInH+unitHeight)/2+i*itemH)+"L344,"+((detaInH+unitHeight)/2+i*itemH+3)+"Z");
arrow.attr({'stroke':'#49FF05','stroke-width':'1px','fill':'#49FF05'});
arrow.data("mypath", inSystemLine[i]);
arrow.attr("progress", 0);
var animation = Raphael.animation({ progress: 1 }, 10000,'<>');
arrow.animate(animation.repeat('Infinity'));

inSystemLine[i] 是运动路径

---