text

O elemento text define um elemento gráfico consistido de texto. Note que é possível aplicar gradientes, padrões, caminhos de recorte, máscara ou filtro para texto.

Contexto de uso

Exemplo

<?xml version="1.0"?>
<svg xmlns="https://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>

O elemento <text> é utilizado para desenhar texto. O seguinte exemplo de código é utilizado para desenhar texto com coordenadas:

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

Textos em SVG podem ser rotacionados. O código a seguir exemplifica isso.

<svg xmlns="https://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>

Textos em SVG também podem ser estilizados

<svg xmlns="https://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 globais

• Atributos de processamento condicional »
• Atributos principais »
• Atributos de eventos gráficos »
• Atributos de apresentação »
• class
• style
• externalResourcesRequired
• transform

Atributos específicos

• x
• y
• dx
• dy
• text-anchor
• rotate
• textLength
• lengthAdjust

DOM Interface

Este elemento implementa a interface do SVGTextElement.

Compatibilidade dos navegadores

A tabela é baseada nessas fontes.

Relacionado

• <tspan>
• <tref>
• <altGlyph>