jquery - 如何为这个 Raphael SVG 图技能栏制作动画？

Question

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

HERE

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

HERE

我该怎么做？

Answer 1

这是一个没有拉斐尔的例子: http://jsfiddle.net/1q70b8Ld/

要绘制圆弧，可以使用<path>像这样:

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

并得到正确的d任何起始和结束 Angular 语法，您可以添加一段 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;
}