// Now the story line is commented in Hungarian. Please forgive me. var steps = [ // Sith beóvakodik a színre () => { svg = document.getElementById("svg"); sith = document.createElementNS("http://www.w3.org/2000/svg", "g"); sith.innerHTML = ''; svg.appendChild(sith); runAnimations(sith, ''); executeNextStep(3000); }, // Jedi beszaltózik a képbe () => { jedi = document.createElementNS("http://www.w3.org/2000/svg", "g"); jedi.innerHTML = ''; svg.appendChild(jedi); runAnimations(jedi, '' + ''); executeNextStep(1400); }, // Sith bekapcsolja a fénykardját () => { sith.innerHTML = '' + sith.innerHTML; executeNextStep(300); }, // Jedi is bekapcsolja a fénykardját () => { jedi.innerHTML = '' + jedi.innerHTML; executeNextStep(200); }, // Hadonásznak, de nem találnak () => { runAnimations(sith.firstChild, ''); executeNextStep(100); }, u, d, u, d, u, d, u, d, u, d, u, d, // A két penge találkozik, és villámlani kezdenek () => { removeAnimations(jedi.firstChild); removeAnimations(sith.firstChild); runAnimations(jedi.firstChild, ''); runAnimations(sith.firstChild, ''); executeNextStep(100); }, l, o, l, o, l, o, l, o, // A Sith kidől, kardja eltűnik () => { removeAnimations(sith); runAnimations(sith, '' + ''); executeNextStep(500); }, () => { sith.removeChild(sith.firstChild); executeNextStep(1400); }, // Jedi is kikapcsolja a kardját () => { jedi.removeChild(jedi.firstChild); executeNextStep(500); }, // Felirat () => { var me = document.getElementById("me"); me.setAttribute("x", 960-me.getBBox().width/2); me.innerHTML += ''; me.getElementsByTagName("animate")[0].beginElement(); } ]; var nextStep = 0; function executeNextStep(timems) { setTimeout(steps[++nextStep], timems); } function runAnimations(element, animations) { element.innerHTML += animations; var transforms = element.getElementsByTagName("animateTransform"); for (var i = 0; i < transforms.length; ++i) { transforms[i].beginElement(); } } function removeAnimations(element) { var i = 0; while (i < element.children.length) { if (element.children[i].tagName.startsWith("animate")) { element.removeChild(element.children[i]); } else { ++i; } } } function cut(up) { removeAnimations(jedi.firstChild); removeAnimations(sith.firstChild); runAnimations(jedi.firstChild, ''); runAnimations(sith.firstChild, ''); executeNextStep(150); } function d() { cut(false); } function u() { cut(true); } function lightningFilter(on) { jedi.setAttribute("filter", on ? "url(#lightning)" : "none"); sith.setAttribute("filter", on ? "url(#lightning)" : "none"); executeNextStep(150); } function l() { lightningFilter(true); } function o() { lightningFilter(false); } var svg = null; var sith = null; var jedi = null; window.onload = () => { steps[0](); }

SVG animations (SW in 15secs)