This page was translated from English by the community. Learn more and join the MDN Web Docs community.

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

CategoriasElemento gráfico, Elemento de contenido de texto
Contenido permitidoDatos de caracteres y cualquier cantidad de los siguientes elementos en cualquier órden:
Elementos de animación
Elementos descriptivos
Text content child elements
<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 específicos

Interfaz DOM

Este elemento hereda la interfaz de SVGTextElement.

Compatibilidad con navegadores

BCD tables only load in the browser

Relacionados