90deg에서 백분율로 순환 진행

Question

입력으로 백분율을 취하고 90deg부터 시작하는 진행 막대를 구현하는 데 도움이 필요합니다.

내가 생성 한 각도에서 어떻게 180도 후 최종 pionts을 얻을 수 있습니다. 코드는 180도 후 제대로 렌더링하지 않습니다

을 ((90DEG)를 시작 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); 
     } 
    }); 

Answer 1

간편한 방법으로 SVG 조작을위한 Snap.svg을보십시오.이 노브 샘플를 확인하십시오. 10 Snap.svg를 사용하여 생성.