如何为Raphael SVG Diagram Skillbar制作动画？

Question

我想使用以下链接中的Raphael Diagram Skillbar：

HERE

但我想用这样的动画显示每一行:(起始位置的动画）

HERE

我该怎么做？

Answer 1

以下是没有Raphael可以实现的一个例子： http://jsfiddle.net/1q70b8Ld/

要绘制弧线，您可以使用<path>，如下所示：

<path stroke="orange" d="M0,-40 A40,40 0,0,1 40,0"/>

要获得任何起始和结束角度的正确d语法，您可以添加一段Javascript：

function path(radius, start, end) {
    while (end < start) end += 360;
    var x1 = Math.sin(Math.PI * start / 180) * radius;   
    var y1 = - Math.cos(Math.PI * start / 180) * radius;   
    var x2 = Math.sin(Math.PI * end / 180) * radius;   
    var y2 = - Math.cos(Math.PI * end / 180) * radius;

    return "M" + x1 + "," + y1
        + "A" + radius + "," + radius + " "
        + "0," + (end - start > 180 ? 1 : 0) + ",1 "
        + x2 + "," + y2;
}