Al dibujar líneas con SVG, a menudo tiene un <path> elemento con un stroke. Estableces un stroke-dasharray que es tan largo como el camino en sí, así como un stroke-offset que se extiende tanto que todo el trazo trazado aparece oculto inicialmente. Entonces animas el stroke-offset de regreso 0 para que pueda ver cómo “dibuja” la forma.
Averiguar la longitud de la ruta es el truco, que afortunadamente puede hacer en JavaScript seleccionando la ruta y haciendo pathEl.getTotalLength(). Probablemente será un decimal extraño. Un poco desafortunado que no podamos obtener eso en CSS, pero c’est la vie.
¡Aquí está el truco!
No tiene que medir la longitud del camino, porque puede configurarlo.
Entonces te gusta:
<path d="M66.039,133.545 ... " pathLength="1" />Eso no hace nada por sí mismo (que yo sepa). No es que solo dibuje una parte de la ruta, todavía dibuja todo como si no hicieras nada, solo que ahora la “matemática” de la longitud de la ruta se basa en un valor de 1.
Ahora podemos configurar el stroke-dasharray a 1y animar el desplazamiento en CSS.
.path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}Que funciona:
Ver la pluma
Ejemplo básico de dibujo lineal SVG, hacia atrás y hacia adelante por Chris Coyier (@chriscoyier)
en CodePen.
Choca esos cinco con Adam Haskell, quien me envió un correo electrónico sobre esto hace unos meses.
Oye, hablando de dibujos de líneas SVG: Lemonade creó una página de destino para su organización benéfica de 2019 que usa líneas SVG activadas por desplazamiento hacia arriba y hacia abajo en toda la página. Lo vieron detrás de escena, lo que siempre aprecio.