Utiliza y reutiliza todo en SVG… ¡Incluye las animaciones!

Si está familiarizado con las animaciones SVG y CSS y ha comenzado a trabajar con ellas con frecuencia, aquí tiene algunas ideas que quizás desee tener en cuenta antes de comenzar a trabajar. Este artículo tratará sobre cómo aprender a crear y optimizar su código con useelementos, variables CSS y animaciones CSS.

Parte 1: Uso de El elemento SVG

Si es un desarrollador al que le gusta mantener su código SECO o un gran fanático de las variables Sass/CSS, es muy probable que le guste esta etiqueta.

Digamos que tienes un elemento que se repite muchas veces en tu gráfico. En lugar de repetir una parte compleja de su código muchas veces en su SVG, puede definir esta parte una vez y luego clonarla en otro lugar de su documento con el elemento use. Esto no sólo reducirá una enorme cantidad de código, sino que también hará que su marcado sea más simple y fácil de manipular.

Para comenzar a implementar el useelemento, vaya a su SVG y siga estos pasos:

1. Identifique la parte del código que desea clonar
2. Agregue una identificación a esa parte
3. Vincúlalo dentro de tu useetiqueta de esta manera:use xlink_href="#id"/

¡Eso es todo! Su nuevo clon está listo; ahora puede cambiar sus atributos (por ejemplo, xsu yposición) para adaptarlos a sus necesidades.

Profundicemos en un ejemplo muy conveniente.

Quiero compartir este caso real donde necesitaba animar un gran cubo hecho de pequeñas unidades cúbicas. (Imagínese el clásico cubo de Rubik).

Comenzaremos dibujando la unidad cúbica en SVG usando formas y transformaciones básicas:

svg viewBox="-130 -20 300 100"  g    rect transform="skewY(30)"/    rect transform="skewY(-30) translate(21 24.3)"/    rect  transform="scale(1.41,.81) rotate(45) translate(0 -21)"/  /g/svg

Tenga en cuenta que las formas están agrupadas en un gelemento para que podamos agregar el ID a toda la figura.

A continuación, construimos un cubo más grande clonando esta unidad. Primero, necesitamos envolver el cubo del ejemplo anterior dentro de la defsetiqueta dentro del SVG. En el defselemento podemos poner lo que queramos reutilizar, que podría ser una sola forma, un grupo, un degradado… casi cualquier elemento SVG. No se mostrarán en ningún lado a menos que los usemos fuera de esta etiqueta.

Luego podemos vincular la unidad tantas veces como queramos usando su ID y cambiar la posición xy yen cada clon de esta manera:

use xlink_href="#cube" x="142" y="124"/use xlink_href="#cube" x="100" y="124"/!-- ... --

Ahora tenemos que posicionar cada cubo recordando que el último elemento aparecerá al frente, después de eso ¡tendremos nuestro primer cubo grande listo!

xlink:hrefEstá en uso desde SVG2, pero es mejor usarlo por motivos de compatibilidad. En los navegadores modernos puedes usar href, pero lo probé en Safari y al momento de escribir este artículo no funciona allí. Si lo usa, xlink:hrefasegúrese de incluir este espacio de nombres en su etiqueta SVG: xmlns:xlink="http://www.w3.org/1999/xlink"(no lo necesitará si decide usar href).

Parte 2: uso de variables CSS para aplicar diferentes estilos a su gráfico reutilizado

Elegí un color principal para el cubo, que es un tono más claro y uno más oscuro para los lados y un color de trazo. ¿Pero qué pasa si queremos hacer un segundo cubo de un color diferente?

Podemos reemplazar los rellenos y trazos con variables CSS para hacer estos atributos más flexibles. De esa manera, podremos reutilizar la misma unidad de cubo con otra paleta (en lugar de definir una segunda unidad con diferentes colores para un segundo cubo).

¿Por qué no agregar una clase al nuevo cubo y cambiar el color de relleno con CSS? Lo haremos, pero primero, intentaremos inspeccionar un useelemento. Notarás que se representa en Shadow DOM. lo que significa que no es vulnerable a scripts y estilos, como elementos en el DOM normal. Cualquier valor que defina en la figura interior defsserá heredado por todas sus instancias y no podrá reescribirlos con CSS. Pero si reemplaza esos valores con variables, podrá controlarlos en CSS.

En nuestra unidad de cubo, revisaremos cada lado y reemplazaremos los valores de relleno y trazo con nombres de variables semánticas.

Por ejemplo, esto:

rect fill="#00affa" stroke="#0079ad" /

…se puede reemplazar con esto:

rect fill="var(--mainColor)" stroke="var(--strokeColor)" /

A partir de aquí, debemos duplicar el SVG para construir un segundo cubo. Sin embargo, no necesitamos duplicar defssi mantenemos ambos en el mismo documento. Podemos agregar una clase a cada SVG y controlar la paleta de colores mediante CSS, redefiniendo los valores de la variable.

Creemos una paleta para el cubo azul y otra para el cubo rosa:

.blue-cube {  --mainColor: #009CDE;  --strokeColor: #0079ad;  --lightColor: #00affa;  --darkColor: #008bc7;}.pink-cube {  --mainColor: #de0063;  --strokeColor: #ad004e;  --lightColor: #fa0070;  --darkColor: #c7005a;}

De esta forma podremos añadir tantos cubos como queramos y cambiar todos los colores desde un mismo lugar.

Parte 3: Reutilizar animaciones

La idea para este caso es romper los cubos al pasar el cursor, algo así como una vista explosiva para que algunas piezas se alejan del centro cuando colocamos el cursor sobre los cubos.

Empecemos por definir dos movimientos, uno para cada eje: move Yy move X. Al dividir las animaciones en movimientos podremos reutilizarlas en cada cubo. Las animaciones consistirán en mover el cubo desde su posición inicial a 30px o 50px de distancia en una dirección. Podemos usar una traducción de transformación ( Xo Y) para lograrlo. Por ejemplo:

@keyframes moveX {  to { transform: translateX(-35px);  }}

Pero si queremos poder reutilizar esta animación, es mejor reemplazar el valor numérico con una variable, como esta:

@keyframes moveX {  to { transform: translateX(var(--translate, 35px)); }}

Si la variable no está definida, el valor predeterminado será 35px.

Ahora necesitamos al menos una clase para vincularnos a la animación. Sin embargo, en este caso necesitamos dos clases para mover cubos en el eje x: .m-lefty .m-right.

.m-left, .m-right {   animation: 2s moveX alternate infinite; }

Para que el cubo se mueva hacia la izquierda, necesitamos un valor negativo, pero también podemos declarar un número diferente. Podemos definir nuestra variable así dentro de la .m-leftclase:

.m-left { --translate: -50px; }

Lo que está sucediendo aquí es que estamos declarando que, cuando agregamos la clase .m-lefta un elemento, esto reproducirá la animación moveX(la definida en @keyframes) que durará dos segundos para trasladarse en el eje x y alcanzar una nueva posición que es -50 píxeles a la izquierda. Luego, la animación alterna direcciones para que se mueva desde la última posición y tarde dos segundos más en volver a su estado original. Y así sucesivamente, porque es un bucle infinito.

Podemos declarar otra variable a la .m-rightclase pero si no lo hacemos recuerda que ocupará los 35px que declaramos al principio.

El valor predeterminado animation-play-stateestá en ejecución, pero tal vez no queramos que los cubos se muevan todo el tiempo. Sería muy molesto y molesto usarlo en un sitio con contenido cercano. Entonces, intentemos reproducir la animación solo al pasar el mouse agregando esto:

svg:hover .m-left {  animation: 2s moveX alternate infinite;}

Puedes probarlo tú mismo y descubrirás que la animación salta súper rápido al estado inicial cada vez que colocamos el cursor fuera del cubo. Para evitarlo, podemos agregar el valor pausedal final de la taquigrafía de la animación:

.m-left {  animation: 2s moveX alternate infinite paused;}

Ahora la animación está en pausa pero se ejecutará al pasar el mouse agregando esta línea de CSS:

svg:hover * {   animation-play-state: running; }

Podemos aplicar cada clase a diferentes elementos en el SVG. En el primer cubo azul, movemos cubos individuales; en el segundo, aplicamos esas clases a grupos de cubos.

Una última cosa…

No fue hasta más tarde que me di cuenta de que podía reutilizar una sola unidad para construirlos todos. Trabajé en el cubo pequeño para hacerlo lo suficientemente isométrico para que pudiera alinearse fácilmente con los demás que estaban al lado. En este punto, mi unidad era path, pero decidí reemplazarla con formas SVG para reducir el código y obtener un marcado más limpio.

Aprendí que es mejor tomarse un tiempo para analizar qué se puede hacer con SVG antes de dibujar cada forma y lidiar con una gran cantidad de código. Puede que al principio le lleve más tiempo, pero a la larga le ahorrará mucho tiempo y esfuerzo.