SVG Animate Tag ломает метку пути d ⇐ Javascript

[Anonymous]

Когда мы используем динамические значения в свой свойствах D -тега Path и имеем анимацию, эта реакционная способность в свойстве D перестает работать. Используйте анимацию с < /code>.
надеюсь, что новые значения D все еще работают после анимации < /p>
Вот пример
codepen < /p>

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

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);< /code>
path {
stroke: #F00;
}< /code>
Start








< /code>
< /div>
< /div>
< /p>
У нас есть цикл, изменяющийся на (нижняя левая вершина, работающая до Право). Это модификация свойства D. , нижняя левая вершина перестает работать вправо, но значение все еще меняется, как мы можем видеть на правой стороне кнопки. /code> и React 

, но это не сработало.
ожидается, что при запуска анимации изменяются в рамках свойства d tag вступить в силу. /p>
попробовал на хром. < /p>

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