de acuerdo con MDN SVG Animation , estoy tratando de reiniciar todas las animaciones de una etiqueta svg haciendo clic en la ventana.

 function restartAnimation(el){ [ 'animate', 'animateColor', 'animateMotion', 'animateTransform', 'set', ].forEach(tag=>{ el.querySelectorAll(tag).forEach(ele => { console.log(ele.getStartTime()); ele.beginElementAt(ele.getStartTime()); }); }); } window.addEventListener('click', ()=>{ restartAnimation(document.querySelector('svg')); });

 <svg id="svg1" viewBox="0 0 200 200" style="width: 50%; height: 50%;"> <path d="M69 0L97 53L0 125" stroke="black" fill="none" stroke-width="5" stroke-linecap="round" id="svgPath1" style="animation: svgPath1Anim 1000ms ease-in-out 1000ms 1;"> <animate id="animStroke1" xlink:href="#svgPath1" attributeType="XML" begin="1s" dur="2s" repeatCount="1" additive="sum" attributeName="stroke" values="silver;wheat;lightgreen"></animate> </path> </svg>

Solía usar ele.beginElement() , pero ignora el tiempo de inicio begin="1s" , que la animación comienza inmediatamente sin demora.

Sin embargo, después de cambiar a ele.beginElementAt(ele.getStartTime()) , no funciona correctamente. cuando hago clic en la ventana, espero que siempre se registre 1 , pero me da una tontería acumulada que

 1 4.7121100425720215 11.299739837646484

Me pregunto por qué sucede esto. Estaré muy contento si puede arreglar la función para mí.

actualmente estoy usando esto

 function whatTime(str){ if(str.includes('ms')){ return parseFloat(str.slice(0, -2)) / 1000; } return parseFloat(str.slice(0, -1)); } function restartAnimation(el){ [ 'animate', 'animateColor', 'animateMotion', 'animateTransform', 'set', ].forEach(tag=>{ el.querySelectorAll(tag).forEach(ele => { setTimeout(()=>{ ele.beginElement(); }, whatTime(ele.getAttribute('begin')) * 1000); }); }); } window.addEventListener('click', ()=>{ restartAnimation(document.querySelector('svg')); });

funciona, pero me pregunto por qué el anterior funciona de manera extraña.