SVG 円アニメーションの挙動がおかしい

Question

下記のような形で円を0～100までSVGアニメーションで動かしたいと思っております。
![

アニメーション自体は動いており、100まで到達するのですが、「stroke-dasharray」パラメータに「from, to」の両方を指定することができず、
100までに到達するまでにクルクル回った変な挙動となってしまいます。
「from, to」が指定されるとうまくいくはずなのですが、指定できず困っております。

$(function () {
	var $circle = $('#circle');
	$circle.animate({'stroke-dasharray': '0 100'}, 3000);
});

方法ありましたらご教授お願い致します。

Comments

[yambejp]

外側の輪について0%のグレーが100%のオレンジにどうやってかわるのですか？

[runnynose]

JSだけだと動作を再現できないので、HTMLのソースもあると良いと思います。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#btn').addEventListener('click', ()=>{
    const stroke_color="orange";
    const text_color="black";
    const base_color="gold";
    const radian=180/Math.PI;
    const cx=100;
    const cy=100;
    const r=80;
    const S=-90;
    let E=S;
    let per=0;
    const max_per=100;
    const p1=document.querySelector('#p1');
    const t1=[["x",cx],["y",cy]].reduce((x,y)=>(x.setAttribute(y[0],y[1]),x),document.querySelector('#t1'));
    const speed1=2; // bigger is faster
    const speed2=10; //  smaller is faster
    p1.setAttribute('stroke',stroke_color);
    p2.setAttribute('fill',base_color);
    t1.setAttribute('fill',text_color);
    var timerId=setInterval(()=>{
      E+=speed1;
      per=Math.round((E-S)/360*100);
      if(per>=max_per){
        per=max_per;
        E=per/100*360+S;
        clearInterval(timerId);
      }
      if(per>=100){
        E-=0.1;
      }
      let f1=(E-S)<=180?0:1;
      let x1=cx+r*Math.cos(S/radian);
      let y1=cy+r*Math.sin(S/radian);
      let x2=cx+r*Math.cos(E/radian);
      let y2=cy+r*Math.sin(E/radian);
      let dx=x2-x1;
      let dy=y2-y1;
      let d1=`M ${x1},${y1} a ${r} ${r} ${S} ${f1} 1 ${dx},${dy} `;
      let d2=d1+`L ${cx},${cy}`;
      p2.setAttribute('d',d2);
      p1.setAttribute('d',d1);
      t1.textContent=per+"%";
    },speed2);
  });
});
</script>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="lightgray"  stroke-width="10" stroke="gray"  />
<path id="p2" d="" fill="none"  />
<path id="p1" d="" fill="none" stroke-width="10" />
<text id="t1" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="black"  font-size="20px" >0%</text>
</svg>
<input type="button" value="btn" id="btn">

※ゴミがまざってたので削除