Анимация пути движения с маркерными элементами, не видимыми и не движущимися [закрыто] ⇐ Html

[Anonymous]

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

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

    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 ... not-moving