SVG JavaScript Анимированные стрелки не видны и не движутся. Анимация пути движения с элементами маркера [закрыто] ⇐ Javascript

[Anonymous]

Это описывает проблему, касающуюся правильного кода для анимации JavaScript SVG. Я пытаюсь оживить серию стрел между статическими текстовыми полями. Есть четыре стрелки, которые должны перемещаться между тремя коробками, однако они остаются невидимыми. В Chrome или Firefox инспектора Firefox нет сообщений об ошибках, которые не дают мне никаких шагов отладки или точек отдыха. Код выполняется, но стрелки не становятся видимыми. Я вижу, как стрелы становятся активными в консольном инспекторе и неактивно, но ни одна не появляется. Анимация не работает, пожалуйста, скажите мне, в чем проблема с кодом JS, что стрелки не будут появляться или оживить? Любая помощь будет получена. Я заключил соответствующие CSS и JS моей страницы.

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

    function animateArrow(id) {
const path = document.getElementById(id);
console.log("Arrow animated");
if (!path) {
console.error(`Arrow with id "${id}" not found!`);
return;
}
}

function resetDemo() {
document.querySelectorAll("path").forEach(p => p.classList.remove("active"));
console.log("Demo Reset");
}
path.style.strokeDashoffset = "300";
void path.offsetWidth; // Force reflow
console.log("Animation Restart");

//trigger animation
path.classList.add("active");
console.log("Animation Triggered");

//remove active status after animation finish
setTimeout(() => path.classList.remove("active"), 1000);

try {
animateArrow("arrow1");
animateArrow("arrow2");
animateArrow("arrow3");
animateArrow("arrow4");

} catch (err) {
console.error(err);
show("userBox", {
error: err.message
});
setStatus("Error: " + err.message);
}
document.getElementById("resetDemo").onclick = resetDemo;< /code>
svg.arrow {
position: absolute;
top: 290px;
width: 100%;
height: 50px;
overflow: visible;
z-index: 1;
}

path {
transition: stroke-dashoffset 1s ease-in-out;
stroke: #1976d2;
stroke-width: 3;
fill: none;
marker-end: url(#arrowhead);
opacity: 0;
/* hidden until animated */
}

path.active {
stroke: #4CAF50;
stroke-width: 2px;
stroke-dasharray: 300;
stroke-dashoffset: 300;
opacity: 1;
animation: draw 1s forwards;
}

@keyframes draw {
to {
stroke-dashoffset: 0;
}
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... -animation