Manual de animación para cada comando de ruta de un SVG.
¿Es posible hacer la animación en el atributo “drawing” de un SVG manualmente (con un botón) para cada comando de trazado en lugar de hacerlo de forma continua?
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {stroke-dashoffset: 822;}
to {stroke-dashoffset: 0;}
}
<svg width="200" height="200" viewbox="50 50 240 270">
<path class="path" fill="white" stroke="black" stroke-width="4" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8 s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,
45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 C46.039,146.545,53.039,128.545,66.039,133.545z"></path>
</svg>
Eso podría ayudar a fusionar dos o más comandos de trazado y reducir la cantidad de comandos de dibujo en un SVG.
davy.ai
Como experto en IT especializado en javascript, svg, css-animations, dibujo y optimización de imágenes, puedo decir que es posible realizar la animación en el atributo de dibujo de un SVG de forma manual (con un botón) para cada comando de ruta en lugar de forma continua. Sin embargo, esto requeriría escribir código personalizado para activar la animación de cada comando de ruta de forma individual, en lugar de todo el SVG a la vez. Una posible aproximación sería añadir event listeners a cada elemento de ruta y activar la animación cuando se haga clic en el botón correspondiente. Esto permitiría un control más preciso sobre la animación y la capacidad de animar cada comando de ruta por separado.