Animar cambios de ruta SVG en CSS

 

 

 

De vez en cuando me motiva a intentar dibujar algunas formas con path, la todopoderosa sintaxis de dibujo de SVG. Sólo entiendo un fragmento de lo que todo esto puede hacer, pero sé lo suficiente como para ser peligroso. Todos los comandos de sintaxis de línea recta (como L) son bastante sencillos y el Qcomando curvo me parece bastante intuitivo. Encuadrate en un dibujo viewBox="0 0 100 100"y dibuja cosas simples que no parecen tan malo.

Aquí hay un ejemplo clásico mío que dibuja cosas con todos los comandos básicos, pero también las animas con CSS (solo navegadores Chromium):

Extraño pero cierto:

svg viewBox="0 0 10 10" path d="M2,2 L8,8" //svg
svg:hover path { transition: 0.2s; d: path("M8,2 L2,8");}

El otro día tuve una situación en la que necesitaba un elemento de la interfaz de usuario que tuviera un icono diferente según el estado en el que se encontrara. Tenía una especie de forma de “registro”, por lo que el valor predeterminado eran líneas rectas, algo así como un menú de hamburguesas (solo cuatro líneas). por lo que se lee más como líneas de texto), luego otros estados diferentes.

 

  1. POR DEFECTO
  2. ACTIVO
  3. ÉXITO
  4. ERROR

Primero escribí la máquina de estados más complicados del mundo:

const indicator = document.querySelector(".element");let currentState = indicator.dataset.state;indicator.addEventListener("click", () = { let nextState = ""; if (currentState == "DEFAULT") { nextState = "ACTIVE"; } else if (currentState == "ACTIVE") { nextState = "SUCCESS"; } else if (currentState == "SUCCESS") { nextState = "ERROR"; } else { nextState = "DEFAULT"; } indicator.dataset.state = nextState; currentState = nextState;});

Eso abrió la puerta para diseñar estados con atributos de datos:

.element { [data-state="DEFAULT"] { } [data-state="ACTIVE"] { } [data-state="SUCCESS"] { } [data-state="ERROR"] { }}

Entonces, si mi elemento comienza con el estado predeterminado de cuatro líneas:

div data-state="DEFAULT" svg viewBox="0 0 100 100" path d="M0, 20 Q50, 20 100, 20"/path path d="M0, 40 Q50, 40 100, 40"/path path d="M0, 60 Q50, 60 100, 60"/path path d="M0, 80 Q50, 80 100, 80"/path /svg/div

…Puedo alterar esas rutas en CSS para el resto de los estados. Por ejemplo, puedo tomar esas cuatro líneas rectas y modificarlas en CSS.

Tenga en cuenta que las cuatro líneas “rectas” tienen convenientemente un punto curvo no utilizado. Solo los caminos que tienen el mismo número y tipo de puntos se pueden animar en CSS. Poner el punto de la curva allí abre puertas.

¡Estos cuatro nuevos caminos en realidad dibujaron algo parecido a un círculo!

.editor-indicator { [data-state="ACTIVE"] { .icon { :nth-child(1) { d: path("M50, 0 Q95, 5 100,50"); } :nth-child(2) { d: path("M100, 50 Q95, 95 50,100"); } :nth-child(3) { d: path("M50,100 Q5, 95 0, 50"); } :nth-child(4) { d: path("M0, 50 Q5, 5 50, 0"); } } }}

Para los otros estados, dibujé una tosca marca de verificación (para ÉXITO) y un tosco signo de exclamación (para FRACASO).

Aquí hay una demostración (nuevamente, Chromium), donde puedes hacer clic para cambiar los estados:

No termine de usarlo porque ni Firefox ni Safari lo admiten d: path();en CSS. No es que no los anime, simplemente no funciona y punto, así que para mí estaba descartado. Terminé cambiando los íconos en los diferentes estados.

Si necesitas transformar la forma en varios navegadores, tenemos un artículo completo al respecto.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Animar cambios de ruta SVG en CSS

Animar cambios de ruta SVG en CSS

De vez en cuando me motiva a intentar dibujar algunas formas con path, la todopoderosa sintaxis de dibujo de SVG. Sólo entiendo un fragmento de lo que todo es

programar

es

https://pseint.es/static/images/programar-animar-cambios-de-ruta-svg-en-css-1247-0.jpg

2024-06-13

 

Animar cambios de ruta SVG en CSS
Animar cambios de ruta SVG en CSS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences