循环进度从90deg到百分比

Question

我需要帮助实现进度条，它将百分比作为输入并从90度开始绘制弧。

我创建了jsfiddle

    jQuery(svg).animate({ 'to': 1 }, {
        duration: 2000,
        step: function(pos, fx) {
            //var offset = (pos);
            if(pos<0.25)
            {
                if(percentage>=25)
                {
                    per=90;
                    jQuery('#percentage').html(Math.round(pos*100)+" %");
                    jQuery('#perval').html(Math.round(pos*100)+"%");
                }
                else
                {
                    per=(percentage*90/25);
                    jQuery('#percentage').html(Math.round(percentage*pos)+" %");
                    jQuery('#perval').html(Math.round(percentage*pos)+"%");
                }
                endx=110+50*Math.cos((PIE)*per*(1-(pos*4)));
                endy=60-50*Math.sin((PIE)*per*(1-(pos*4)));
            } else if(pos<0.75)
            {
                if(percentage>=75)
                {
                    per=180;
                    jQuery('#percentage').html(Math.round(pos*100)+" %");
                    jQuery('#perval').html(Math.round(pos*100)+"%");
                }
                else
                {
                    per= ((percentage-25)*180/50);
                    jQuery('#percentage').html(Math.round(percentage*pos)+" %");
                    jQuery('#perval').html(Math.round(percentage*pos)+"%");
                }
                if(pos < 0.50) {
                    endx=110+50*Math.cos((PIE)*(per*(pos-0.25)*2));
                    endy=60+50*Math.sin((PIE)*(per*(pos-0.25)*2));
                } else {
                    endx=110-50*Math.cos((PIE)*(per*(pos-0.25)*2));
                    endy=60-50*Math.sin((PIE)*(per*(pos-0.25)*2));

                }
            }   else 
            {
                per= ((percentage - 75)*90/25);
                jQuery('#percentage').html(Math.round(percentage*pos)+" %");
                jQuery('#perval').html(Math.round(percentage*pos)+"%");             
                endx=110-50*Math.cos((PIE)*per*(pos*4));
                endy=60+50*Math.sin((PIE)*per*(pos*4));                 
            }
            svg.setAttribute('d',current_dx+endx+","+endy);
        }
    });

从一个角度（（90deg）开始，如何在180deg之后获得最终的pionts。

180deg后代码无法正常呈现。

Answer 1

以简单的方式查看Snap.svg的SVG操作。检查使用Snap.svg创建的此旋钮样本link。