Texto SVG
Descripción del elemento <text>
El elemento SVG <text> especifica un elemento gráfico utilizado para mostrar texto. Es posible aplicar un patrón, una ruta de recorte, una máscara, un degradado o un filtro a <text>, al igual que con otros elementos gráficos SVG. El texto que no esté incluido dentro de un elemento <text> no se renderizará. En cambio, el texto incluido dentro de un elemento <text> puede renderizarse con ajuste automático, preformateado o sobre una ruta.
El texto SVG admite características tipográficas como decoraciones de texto, elección de tipografía y uso de ligaduras discretas, estilísticas o históricas.
SVG también admite las necesidades de procesamiento de texto internacional:
- texto de izquierda a derecha o bidireccional,
- la orientación vertical y horizontal del texto,
- diseño de texto complejo,
- alineación de glifos a diferentes líneas de base.
Es posible tener contenido SVG multilingüe sustituyendo varias cadenas de texto según el idioma preferido del usuario.
Para dar estilo al texto, puede utilizar propiedades CSS específicas para texto como font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width y fill.
Ejemplo del elemento SVG <text>:
Ejemplo del elemento SVG <text>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" >
<text x="20" y="25" fill="purple">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Ejemplo del elemento SVG <text> con el atributo rotate:
Ejemplo del elemento SVG <text> con el atributo rotate
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="150" style="border:1px solid red">
<text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>En el siguiente ejemplo, el elemento <text> se utiliza junto con el elemento <tspan>, que puede contener diferentes formatos y posiciones.
Ejemplo del elemento SVG <text> utilizado con el elemento <tspan>:
Ejemplo del elemento SVG <text> utilizado con el elemento <tspan>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="450" height="150" style="border:1px solid #cccccc">
<text x="20" y="20" style="fill:green">
Example of the SVG "text" element used with the "tspan" element
<tspan x="25" y="65">This is a SVG text.</tspan>
<tspan x="35" y="90">This is a SVG text.</tspan>
<tspan x="45" y="115">This is a SVG text.</tspan>
</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Ejemplo del elemento SVG <text> utilizado con el elemento <a>:
Ejemplo del elemento SVG <text> utilizado con el elemento <a>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" style="border:1px solid #cccccc">
<a href="https://www.w3docs.com/learn-html/svg-intro.html" target="_blank">
<text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
</a>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Atributos
| Atributo | Descripción |
|---|---|
| x | Especifica la coordenada x inicial de la línea de base del texto. |
| y | Especifica la coordenada y inicial de la línea de base del texto. |
| dx | Especifica el desplazamiento horizontal de una posición de texto desde una posición anterior. |
| dy | Especifica el desplazamiento vertical de una posición de texto desde una posición anterior. |
| rotate | Especifica la rotación de la orientación para cada glifo individual. |
| lengthAdjust | Especifica cómo se comprime o estira el texto para ajustarse al ancho definido por el atributo textLength. |
| textLength | Especifica el ancho que debe ocupar el texto. |
| text-anchor | Especifica la alineación horizontal del texto. |
| dominant-baseline | Especifica la alineación vertical del texto. |
El elemento SVG <text> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Qué se puede lograr usando el elemento 'text' de SVG en HTML?