Javascript SVG中的顺时针破坏路径

因此，第一个函数创建了一个圆，它工作得非常好，但是我对destroy circle函数有一个问题。有没有办法顺时针破坏这个圆

演示：

HTML代码：

<div style="width:160px;height:160px;">
    <svg width="160" height="160" viewBox="0 0 160 160">
        <path id="arc" transform="translate(80, 80) scale(0.85)" fill="rgba(0,0,0,0.73)" d="M 0, 0 V -80 A 0 0 1 1 1 -0.001 -80 Z"></path>
    </svg>
</div>

---

我认为这是最简单的方法：

您需要删除

drawCircle

函数中添加的所有片段。为此，您可以将字符串转换为数组，并简单地使用

shift

或

pop

（

pop

将逆时针执行）

---

我已经更新了你的JSFIDLE:

谢谢你的评论，我刚刚更新了问题@codename@Emre

function destroyCircle(id) {
    var circle = document.getElementById(id);
    var angle = 270;
    var radius = 80;
    window.timerx = window.setInterval(

    function () {
        angle = angle + 3;
        var radians = (angle / 180) * Math.PI;
        var x = -Math.cos(radians) * radius;
        var y = Math.sin(radians) * radius;
        var e = circle.getAttribute("d");
        var d = e + " L " + x + ", " + y;

        if (angle > (270 + 356)) {
            window.clearInterval(window.timerx);
        }
        circle.setAttribute("d", d);
    }, 20);
}

function drawCircle(id) {
    var circle = document.getElementById(id);
    var angle = 90;
    var radius = 80;
    window.timer = window.setInterval(

    function () {
        angle = angle + 3;
        var radians = (angle / 180) * Math.PI;
        var x = -Math.cos(radians) * radius;
        var y = -Math.sin(radians) * radius;
        var e = circle.getAttribute("d");
        var d = e + " L " + x + " " + y;
        circle.setAttribute("d", d);
        if (angle > 449) {
            window.clearInterval(window.timer);
            destroyCircle("arc"); // DESTROY THE CIRCLE
        }
    }, 10);
}

// draw the circle
drawCircle("arc");

function destroyCircle(id) {
    var circle = document.getElementById(id);
    var angle = 0;
    var radius = 80;

    var e = circle.getAttribute("d");
    var x = e.split('Z');
    var y = x[1].split('L');

    window.timerx = window.setInterval(function () {
        y.shift()
        var d = x[0] + 'Z L' + y.join('L');

        if (!y.length) {
            d = x[0] + 'Z';
            clearTimeout(window.timerx)
        }

        circle.setAttribute("d", d);
    }, 10);
}