データを使用して円弧のSVGパスを計算するにはどうすればよいですか？

Question

理論的には、「x」時間が経過した後に満ちる円形のゲージがあります。

私は現在、ウェブアプリケーションを構築していますが、私は円弧をデバッグの目的で動作させていますが、今私がする必要があるのは、アプリケーション内の円形ゲージを追跡できるように属性を適用することです

ユーザーがログインするときに、この円形ゲージに「x」時間が残っていることを確認するにはどうすればよいですか？以下

JS：

function describeArc(radius, startAngle, endAngle) { 

function polarToCartesian(radius, angle) { 
    return { 
     x: radius * Math.cos(angle), 
     y: radius * Math.sin(angle), 
    }; 
} 

var start = polarToCartesian(radius, endAngle); 
var end = polarToCartesian(radius, startAngle); 

var largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1; 

// Generate the SVG arc descriptor. 
var d = [ 
    'M', start.x, start.y, 
    'A', radius, radius, 1, largeArcFlag, 0, end.x, end.y 
].join(' '); 

return d; 
} 

let arc = 0; 

setInterval(function() { 
// Update the ticker progress. 
arc += Math.PI/1000; 
if (arc >= 2 * Math.PI) { arc = 0; } 

// Update the SVG arc descriptor. 
let pathElement = document.getElementById('arc-path'); 

pathElement.setAttribute('d', describeArc(26, 0, arc)); 
}, 400/0) 

私はSVGやJSに新しいですので、私は私の頭を悩ま残っています。

ありがとうございます！

Answer 1

あなたはlocalStorageに現在arc値を保存することができますので、あなたは、私はそれを試してみるよこの

function describeArc(...) { ... } 

let arc = localStorage.arc ? parseFloat(localStorage.arc) : 0; 

setInterval(function() { 
    // Update the ticker progress. 
    arc += Math.PI/1000; 
    if (arc >= 2 * Math.PI) { arc = 0; } 

    // Update the SVG arc descriptor. 
    let pathElement = document.getElementById('arc-path'); 

    pathElement.setAttribute('d', describeArc(26, 0, arc)); 

    // Persist the current arc value to the local storage 
    localStorage.setItem('arc', arc); 
}, 400/0) // Divided by 0?