Crea textos con bordes animados sólo con SVG y CSS
CrissMaldonadoH0
Con el elemento SVG es posible construir textos animados, asignándoles a estos últimos los mismos atributos de cualquier vector gráfico escalable (SVG por sus siglas en inglés); para entender cómo hacerlo hablemos un poco de lo que vamos a necesitar.
Conceptos
1. El elemento <symbol> define objetos (como textos, círculos, etc) como una plantilla gráfica que será instanciada por el elemento <use> a través de un atributo ID. Si esto no es del todo entendible para ti, no te preocupes, ya lo veremos con un ejemplo de código.
2. El elemento <text> de SVG nos permitirá dibujar gráficos a partir de letras, haciendo posible aplicarles gradientes, filtros, máscaras de capa, etc; sin necesidad de usar CSS.
3. Finalmente, el elemento <use> a través del atributo ID toma un nodo existente dentro del elemento SVG (como por ejemplo el <symbol>) para pintarlo en pantalla.
Veamos todo esto con un ejemplo; en nuestro archivo HTML, dentro del body vamos a crear el siguiente código:
Nota como el elemento <symbol> tiene su atributo ID el cual es relacionado en el elemento <use>, así mismo, dentro del elemento <symbol> incluimos el elemento <text> el cual, como lo mencionamos, nos permitirá dibujar gráficos a partir de letras; en otras palabras, el elemento <use> pintará en pantalla lo que el elemento con el ID que se le asignó contiene dentro, en este caso el elemento <symbol>.
Al ejecutar este código debes obtener algo así, pero con tu texto:
No es exactamente lo que queremos obtener, por eso, le agregaré el siguiente código de CSS para conseguir el objetivo.
En el código anterior lo realmente importante sucede cuando se le dan estilos al elemento <text> (lo demás es solo agregar un color de fondo y darle una posición al elemento SVG), si te fijas, en el penúltimo bloque de código implementamos los atributos “stroke”, los cuales nos permiten jugar con el formato de la línea de los elementos SVG, veamos que permite hacer cada uno de ellos:
stroke: establece el color de la línea stroke-width: establece el ancho a la línea stroke-dasharray: permite mostrar la línea como un conjunto de punto, su valor establece la longitud de puntos que conformarán la línea stroke-linejoin: establece la forma en donde se encuentran las líneas
Finalmente, al elemento <text> le asignamos una animación para poder aumentar la longitud de puntos que conformarán el borde de las letras
El resultado que debes obtener es el siguiente:
Cuéntame, ¿obtuviste el mismo resultado?
Publicar un comentario