Trabajar con texto en gráficos vectoriales escalables (SVG)
En nuestras publicaciones anteriores, hemos usado SVG para crear formas. En este post, como decía el título, analizaremos creando texto con SVG. Hay muchas cosas que podemos hacer con el texto más allá de lo que el texto HTML simple es capaz de hacer.
Por lo tanto, vamos a verlos.
Implementación básica
Pero, antes de seguir adelante, veamos cómo Texto en SVG Se forma en su nivel muy básico:
El texto en SVG, como se puede ver en el fragmento de código anterior, se define con una etiqueta suficientemente lógica, X y y atributos para especificar las coordenadas de línea de base.
Fuente de imagen: Wikipedia.org
Y aquí es cómo se verá el texto. Por ahora parece que no hay diferencia con el texto regular en HTML..
Estilos básicos de texto
El texto también puede ser estilizado con propiedades CSS como peso de fuente, Estilo de fuente, y decoracion de texto que puede ser implementado a través de estilo en línea, estilo interno o estilo externo Como hemos discutido en el post anterior sobre Estilo SVG con CSS. Estos son algunos de los ejemplos..
Negrita
Este es el texto en el gráfico vectorial escalable (SVG)
Itálico
Este es un texto en cursiva en el gráfico vectorial escalable (SVG)
Subrayar
Este es un texto subrayado en el gráfico vectorial escalable (SVG)
Elemento
En algunos casos, cuando solo queremos aplicar estilos o atributos a una parte particular del texto, podemos usar
Esto es audaz ,esto es cursiva yesto está subrayado
Modo de escritura
El texto no solo se escribe desde de izquierda a derecha. En otras partes del mundo, Japón, por ejemplo, el texto está escrito desde de arriba hacia abajo. En SVG, esto se puede hacer usando el modo de escritura atributo.
ぃ ぅ ぇ き
En el ejemplo anterior, hemos puesto varios caracteres japoneses al azar (no me preguntes su significado, realmente no tengo idea) y cambiamos la orientación con esta declaración de estilo, modo escritura: tb, dónde tuberculosis es soporte para de arriba hacia abajo.
Contorno de texto
El texto en SVG es básicamente un gráfico., por lo que también podemos aplicar el carrera atributo para agregar una línea de borde al texto tal como lo hicimos con las otras formas.
En el fragmento de código anterior, hemos añadido el carrera atribuir a la llenar atribuir a ninguna lo que resultará en la siguiente presentación de texto..
Ruta de texto
En SVG, el texto no solo se puede mostrar horizontal y verticalmente, sino que también puede seguir un patrón de ruta. Aquí está cómo hacerlo..
Primero, tenemos que definir el camino. Sin embargo, crear una Ruta directamente en HTML no es tan intuitivo, necesitamos entender las coordenadas y algunos comandos que estoy seguro que la mayoría de nosotros tratará de evitar. Entonces, para simplificar este paso, personalmente sugiero abrir un editor vectorial (Inkscape o Illustrator), crear una ruta y generar el código SVG.
Luego, ponga el defs aquí significa definición.
Tenga en cuenta que también hemos añadido un carné de identidad atribuir a la carné de identidad a nuestro texto con
Lorem ipsum dolor sit amet consectetur.
Otras lecturas: Caminos SVG
Gradiente de texto
También es posible agregar un fondo para rellenar el texto en SVG, y si ha tenido éxito en la sección Ruta de texto anterior, esto sería mucho más fácil.
Primero, necesitamos definir los colores degradados..
Cuando todas las definiciones necesarias están configuradas, ahora solo tenemos que agregar el texto y consultar el llenar atribuir al gradiente de carné de identidad atributo, de la siguiente manera;
Gradiente
Y aquí está, el texto con degradado..
Otras lecturas: Gradiente y patrón de SVG
Referencias adicionales
El texto en SVG es sin duda poderoso, hay muchas cosas que podemos hacer más allá de lo que podemos acomodar en esta publicación. Entonces, a continuación, hemos reunido algunas referencias más para atender su interés en este tema..
- Acerca de las fuentes en SVG - Divya Manian
- Documentación oficial de texto SVG - W3.org
- SVG Dovumentation en Mozilla Dev. Red con ejemplos y herramientas - MDN
- Atributo de modo de escritura SVG - MDN
- Ver demostración
- Descargar fuente
