TEXTO SVG EN HTML5

Anterior
Avanzar

Ahora podemos crear gran variedad de textos vistosos con HTML5 en SVG, similar a las formas geométricas podemos definir gran variedad de propiedades, ademas al tratarse de texto ahora es posible aplicar estilos como el tipo de letra, tamaño, variación, peso, etc. Mejor veamos cómo se hace paso a paso.

Etiqueta text

Para crear texto en formato SVG, simplemente agregamos la etiqueta <text> dentro del elemento <svg>, en este caso es necesario la etiqueta de cierre <text/> como veremos en el ejemplo:

El texto que deseemos crear ira dentro de la etiqueta <text>, veamos un ejemplo.

<svg>
  <text>Este es un texto SVG</text>
</svg>

Posición del texto

Los textos SVG pueden ser posicionados al igual que las figuras geométricas, para ello emplearemos los atributos X y Y.

  • x.- distancia hacia el texto en el eje X.
  • y.- distancia hacia el texto en el eje Y.

El punto (X,Y) es el punto donde inicia el texto, observa el gráfico para entender exactamente el punto de posición del texto.

Ejemplo:

<svg>
    <text x="80" y="130">Este es un texto SVG</text>
</svg>

Resultado:

Personalizando texto

Ahora podemos personalizar el texto empleando cualquier propiedad compatible con formatos de texto. Empecemos aplicando las propiedades que ya conocemos y que tambien aplicamos en las lecciones anteriores de SVG.

  • fill.- color de relleno de texto.
  • stroke.- color de borde de texto.
  • stroke-width.- ancho de borde del texto.

Ejemplo aplicativo:

<svg width="400" height="300">
    <text x="50" y="130" fill="yellow" stroke="blue" stroke-width="5px">Este es un texto SVG</text>
</svg>

Para visualiza un resultado más atractivo agregaremos otras propiedades más, las cuales conoceremos a continuación.

Te recomendamos leer:  Etiqueta de vídeo HTML5 - Atributos y propiedades

Aplicando propiedades propias de texto

En el curso de CSS aprenderás todo lo que tenga que ver con personalizar y maquetar, por ahora mencionamos solo algunas propiedades para realizar los ejercicios de muestra, veamos:

  • font-family.- indica el tipo de familia tipográfica o tipo de letra.
  • font-size.- para establecer tamaño de letra.
  • font- weight.- para establecer grosor de letra.

Para agregar estas propiedades, emplearemos el atributo style dentro de la etiqueta <text>, el atributo style contiene las propiedades que deseamos aplicar. Si aún no pasaste el curso de CSS, por ahora basta con que entiendas que style contiene instrucciones para controlar la apariencia del texto, estas instrucciones están formadas por propiedades CSS y sus respectivos valores que ya conocerás en mayor profundidad en el curso de CSS.

El código a continuación indica que el tipo de letra debe ser impact, tamaño de letra 40px y ancho de letra de 800; esta información será agregada a la etiqueta <text>; veamos.

style="font-family:impact; font-size:40px; font-weight: 800;"

Ejemplo:

<svg width="400" height="300">
    <text x="50" y="130" fill="yellow" stroke="blue" stroke-width="2px" style="font-family:impact; font-size:40px; font-weight: 800;">Este es un texto SVG</text>
</svg>

Resultado:

Ahí está, el resultado es un texto con relleno amarillo, borde de 2 pixeles color azul, tamaño de letra 40px. Si te fijas el primer ejemplo notarás que solo se tenia la posición y el texto establecido, por defecto se aplicaba un texto poco atractivo. ¿Ves la diferencia? Porsupuesto.

Por ahora es suficiente, ya sabes como crear textos en SVG y ese era el objetivo. Sigue aprendiendo que esto no acaba. ¡Vamos!

Lecciones de HTML5
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5