SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <tspan> define un subtexto dentro de un elemento <text> u otro elemento <tspan>. Permite el ajuste del estilo y/o la posición de ese subtexto según las necesidades del usuario.
Sintaxis:
<tspan attributes="" >
Subtext
</tspan>
Atributo:
- x: coordenadas del eje x de los glifos.
- y: coordenadas del eje y de los glifos.
- dx: desplazamiento a lo largo del eje x.
- dy: desplazamiento a lo largo del eje y.
- rotar: rotación de glifos.
- textlength: representa la longitud del texto.
- lengthAdjust: ajustes con la longitud renderizada.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<style>
tspan { font: bold; fill: green; }
</style>
<text x="10" y="30" class="small">
<tspan>GeekforGeeks</tspan>:
Computer Science Portal for Geeks!
</text>
</svg>
</body>
</html>
Producción:
Example 2: Fading the color of the rectangle
html
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<style>
tspan { fill: green; font: bold 40px sans-serif;}
</style>
<text x="10" y="30" class="small">
This is <tspan>Large</tspan> Text
</text>
</svg>
</body>
</html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 9 y superior
- Firefox 1.5 y superior
- Apple Safari 3 y superior
- Ópera 9 y superior