Тег анимации SVG разрывает тег пути d ⇐ Javascript

[Anonymous]

Когда мы используем динамические значения в свойстве D тега Path и имеем анимацию, эта реактивность в свойстве D перестает работать.
Использование динамических значений в свойстве D и используйте анимацию с .
Надеемся, что новые значения D все еще работают после анимации.
Вот пример
Codepen

Код: Выделить всё

const elAnimation = document.querySelector("#animation");
const elStartButton = document.querySelector("#btnStartAnimation");
const elPath = document.querySelector("#elPath");
const elSpan = document.querySelector(".dvalue");

elStartButton.addEventListener("click", () => {
elAnimation.beginElement();
});

let x = 0;

function getDValue(value) {
return `m 3.0230713,3.0230713 h 8.6091807 v 3.0887902 l 30.822183,0.3285947 0.06572,-3.4173849 H 50.20927 V 23.855974 H ${3.0230713 + x} Z`;
}

function setDValue(value) {
elPath.setAttribute('d', value);
}

setInterval(() => {
const newDValue = getDValue(x);
setDValue(newDValue);
elSpan.textContent = x;
x++;
if (x > 15) x=0;

}, 500);

Код: Выделить всё

path {
stroke: #F00;
}

Код: Выделить всё

Start

Подробнее здесь: https://stackoverflow.com/questions/793 ... path-d-tag