text

El elemento text define un elemento gráfico que consiste en texto. Nótese que es posible aplicar un degradado, patrón, recorte, máscara o filtro al texto

Uso

Categorias	Elemento gráfico, Elemento de contenido de texto
Contenido permitido	Datos de caracteres y cualquier cantidad de los siguientes elementos en cualquier órden: Elementos de animación Elementos descriptivos Elementos de contenido de texto `<a>`

Ejemplo

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="100px" height="30px" viewBox="0 0 1000 300">

  <text x="250" y="150" 
        font-family="Verdana" 
        font-size="55">
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke-width="2" />
</svg>

El elemento <text> es usado para dibujar texto. El siguiente código de ejemplo es usado para dibujar texto con coordenadas.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10" y="20">SVG Text Example</text>
</svg>

El elemento text puede ser rotado. El siguiente código de ejemplo muestra cómo.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10"  y="20" 
        transform="rotate(30 20,40)">
    SVG Text Rotation example
  </text>
</svg>

SVG text también puede ser estilizado

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10"  y="20"
        style="font-family: Times New Roman;
               font-size  : 24;
               stroke     : #00ff00;
               fill       : #0000ff;">
    SVG text styling
  </text>
</svg>

Atributos

Atributos globales

Atributos de procesamiento condicional »
Atributos base »
Atributos de eventos gráficos »
Atributos de presentación »
class
style
externalResourcesRequired
transform

Atributos específicos

x
y
dx
dy
text-anchor
rotate
textLength
lengthAdjust

Interfaz DOM

Este elemento hereda la interfaz de SVGTextElement.

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Escritorio
Móvil

Feature	Chrome	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	1.5 (1.8)	9.0	8.0	3.0.4

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	1.0 (1.8)	Sin soporte	(Yes)	3.0.4

La gráfica está basada en estas fuentes.

Relacionados

Última actualización:

Mar 23, 2019, by MDN contributors