Intentando usar la función vanila animate() para animar el elemento SVG <path>
Sendero:
<path id="path1" fill="black" d="M30,30l 50,10 0,50"></path>js:
path1.animate([ { d: `M30,30 l10,10 50,0` }, { d: `M30,30 l60,10 50,20` }, { d: `M30,30 l10,10 50,0` }, ], { duration: 1000 })Recibiendo una advertencia y ninguno funciona:
Valor de fotograma clave no válido para la propiedad d: M30,30 l10,10 50,0 Valor de fotograma clave no válido para la propiedad d: M30,30 l60,10 50,20 Valor de fotograma clave no válido para la propiedad d: M30,30 l10,10 50,0
js animate() utiliza la API de animación web .
Por lo tanto, deberá envolver sus coordenadas d en una función de path() como en las animaciones de ruta css.
path.animate([ { d: "path('M40 40 l10 10 50 0')" }, ], { duration: 1000, }) let path0 = document.getElementById("path0"); path0.animate([ // { d: "path('M30,30l 50,10 0,50')" }, { d: "path('M40 40 l10 10 50 0')" }, { d: "path('M50,50 l60,10 50,20')"}, { d: "path('M30,60 l10,20 50,0')" }, ], { duration: 1000, iterations: Infinity }) svg { width: 200px; display: inline-block; border: 1px solid red; } .pathAni { transition: 0.3s; } .pathAniCss { animation: dAni 3s forwards infinite; } @keyframes dAni { 33% { d: path("M40 40 l10 10 50 0"); } 66% { d: path("M50,50 l60,10 50,20"); } 100% { d: path("M30,60 l10,20 50,0"); } } <svg viewBox="0 0 100 100"> <path class="pathAn0" id="path0" fill="black" d="M30,30l 50,10 0,50"></path> </svg> <svg viewBox="0 0 100 100"> <path class="pathAniCss" id="path2" fill="black" d="M30,30l 50,10 0,50"></path> </svg>De W3C Docs: Animaciones web; Borrador de trabajo del W3C, 18 de mayo de 2021
El modelo de animaciones web está diseñado para proporcionar las funciones necesarias para expresar transiciones CSS [CSS-TRANSITIONS-1], animaciones CSS [CSS-ANIMATIONS-1] y SVG [SVG11]. Como tal, el modelo de casos de uso de Web Animations es la unión de casos de uso para esas tres especificaciones.
Verifique el soporte del navegador para la path()
Informe caniuse de Firefox 2022:
Solo se admite en las propiedades clip-path y offset-path.
Algunos ejemplos para probar el soporte del navegador: Animar cambios de ruta SVG en CSS