円弧のSVGパスをアニメーション化する方法は？

Question

承認済みの回答に基づいてSVGパスをアニメートしたい - How to calculate the SVG Path for an arc (of a circle) その回答からコードをコピーし、setInterval関数のみを追加しました。しかし、アニメーションは間違っています。私の目標は、通常の円としてパスを描画（アニメーション化）することです。 フィドル - https://jsfiddle.net/alexcat/64w2hc31/

ありがとうございました。

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
 
    var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
 

 
    return { 
 
    x: centerX + (radius * Math.cos(angleInRadians)), 
 
    y: centerY + (radius * Math.sin(angleInRadians)) 
 
    }; 
 
} 
 

 
function describeArc(x, y, radius, startAngle, endAngle){ 
 
    var start = polarToCartesian(x, y, radius, endAngle); 
 
    var end = polarToCartesian(x, y, radius, startAngle); 
 

 
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 
 

 
    var d = [ 
 
     "M", start.x, start.y, 
 
     "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y 
 
    ].join(" "); 
 

 
    return d;  
 
} 
 

 
    var i = 0; 
 
    setInterval(function(){ 
 
    i++ 
 
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, i, 270)); 
 
    if (i === 360) { 
 
     i = 0; 
 
    } 
 
}, 10);

svg { 
 
    height: 1000px; 
 
    width: 1000px; 
 
}

<svg> 
 
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" /> 
 
</svg> 
 

 
<script src="https://d3js.org/d3.v3.min.js"></script>

Answer 1

describeArc(150, 150, 100, i, 270)に問題があり、describeArc(150, 150, 100, 0, i)に変更し、0123に電話してください終了したらとなります。

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
 
    var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
 

 
    return { 
 
    x: centerX + (radius * Math.cos(angleInRadians)), 
 
    y: centerY + (radius * Math.sin(angleInRadians)) 
 
    }; 
 
} 
 

 
function describeArc(x, y, radius, startAngle, endAngle){ 
 
    var start = polarToCartesian(x, y, radius, endAngle); 
 
    var end = polarToCartesian(x, y, radius, startAngle); 
 

 
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 
 

 
    var d = [ 
 
     "M", start.x, start.y, 
 
     "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y 
 
    ].join(" "); 
 

 
    return d;  
 
} 
 

 
    var i = 0; 
 
    var intervalId = setInterval(function(){ 
 
    i++ 
 
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, i)); 
 
    if (i === 360) { 
 
     clearInterval(intervalId); 
 
    } 
 
}, 10);

svg { 
 
    height: 1000px; 
 
    width: 1000px; 
 
}

<svg> 
 
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" /> 
 
</svg> 
 

 
<script src="https://d3js.org/d3.v3.min.js"></script>

Answer 2

describeArc（150、150、100 I、270）describeArcに変更（150、150、100 I、360）

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
 
    var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
 

 
    return { 
 
    x: centerX + (radius * Math.cos(angleInRadians)), 
 
    y: centerY + (radius * Math.sin(angleInRadians)) 
 
    }; 
 
} 
 

 
function describeArc(x, y, radius, startAngle, endAngle){ 
 
    var start = polarToCartesian(x, y, radius, endAngle); 
 
    var end = polarToCartesian(x, y, radius, startAngle); 
 

 
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 
 

 
    var d = [ 
 
     "M", start.x, start.y, 
 
     "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y 
 
    ].join(" "); 
 

 
    return d;  
 
} 
 

 
    var i = 0; 
 
    setInterval(function(){ 
 
    i++ 
 
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, i, 360)); 
 
    if (i === 360) { 
 
     i = 0; 
 
    } 
 
}, 10);

svg { 
 
    height: 1000px; 
 
    width: 1000px; 
 
}

<svg> 
 
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" /> 
 
</svg> 
 

 
<script src="https://d3js.org/d3.v3.min.js"></script>