Как изменить анимацию SVG с JS в HTML ⇐ Html

[Anonymous]

Я создаю веб -сайт для моделирования рычагов для железных дорог, которые в настоящее время используют их. Чтобы имитировать рычаги, я решил использовать SVG, которые, кажется, работают относительно хорошо. Тем не менее, в настоящее время я сталкиваюсь с проблемой, не способной обратить вспять анимации, поэтому сбросить рычаги в их исходное состояние. все. Есть ли лучший способ, чем реверсирование клавиш < /code>?

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

//defined in a json file
leverframe = {
"1": {
"id": "HJ1",
"type": "d"
},
"2": {
"id": "HJ2",
"type": "s"
},
"3": {
"id": "HJ3",
"type": "s"
},
"4": {
"id": "HJ4",
"type": "es"
}
}

// box.html
const leverlist = new Map()

for (const lever of Object.keys(leverframe)) {
const leverimg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
levers.appendChild(leverimg)
leverimg.outerHTML = 'imagetext' + lever + ''

leversvg = document.getElementById(lever)
leverlist.set(lever, false)

leversvg.onclick = function() {
leverlist.set(lever, !leverlist.get(lever))

if (leverlist.get(lever)) {
console.log("doing animation")
console.log(document.getElementById(lever + "pull1"))
document.getElementById(lever + 'pull1').setAttribute("keyPoints", "0; 1")
document.getElementById(lever + 'pull2').setAttribute("keyPoints", "0; 1")
document.getElementById(lever + 'pull3').setAttribute("keyPoints", "0; 1")
document.getElementById(lever + 'pull1').beginElement();
console.log("done animation")
} else {
console.log("doing animation")
console.log(document.getElementById(lever + "pull1"))
document.getElementById(lever + 'pull1').setAttribute("keyPoints", "1; 0")
document.getElementById(lever + 'pull2').setAttribute("keyPoints", "1; 0")
document.getElementById(lever + 'pull3').setAttribute("keyPoints", "1; 0")
document.getElementById(lever + 'pull1').beginElement();
console.log("done animation")
}
}
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/796 ... js-in-html