Texto <text> no SVG

Elemento SVG

Para desenhar texto, use o elemento <text>.

　　　　　　<h1>Texto SVG</h1>
　　　　　　<svg width="550" height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="40" y="23">Texto: </text>
　　　　　　　　　　　　<text x="40" y="40" fill="rgb(121,0,121)">pt.oldtoolbag.com Tutorial básico </text>
　　　　　　　　　</g>　
　　　　　　</svg>

O efeito após a execução será o seguinte:

Texto SVG

Explicação de Uso

x: Define a posição superior esquerda do texto.

y: Define a posição superior do texto.

width: Define a largura.

height: Define a altura.

fill: A propriedade de preenchimento define a cor de preenchimento.

Texto giratório

Usado para criar texto giratório.

<svg height="100" width="200">
　　<text x="0" y="15" fill="red" transform="rotate(30　20,40)">pt.oldtoolbag.com</text>
</svg>

O efeito após a execução será o seguinte:

Explicação de Uso

x: Define a posição superior esquerda.

y: Define a posição superior.

width: Define a largura.

height: Define a altura.

fill: A propriedade de preenchimento define a cor de preenchimento.

Texto Multilinha

Usado para criar texto multilinha. Utilize o elemento <tspan> para organizar o elemento <text> em um número arbitrário de subgrupos.

<svg width="570" height="100">
　　<g>
　　<text x="40" y="23">Texto Multilinha: </text>
　　<text x="40" y="40" fill="rgb(121,0,121)">pt.oldtoolbag.com
　　　<tspan x="40" y="60" font-weight="bold">　Tutorial básico online.　</tspan>
　　　</text>
　　</g>
　</svg>

O efeito após a execução será o seguinte:

Explicação de Uso

x: Define a posição superior esquerda.

y: Define a posição superior.

width: Define a largura.

height: Define a altura.

fill: A propriedade de preenchimento define a cor de preenchimento.

Texto de hiperlink

Usado para criar texto com hiperlinks.

　　　　　　<svg width="500" height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="20" y="10">Texto como Link: </text>
　　　　　　　　　
　　　　　　　　　　　　<a xlink:href="https://pt.oldtoolbag.com/svg-tutorial" target="_blank">
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40"　
　　　　　　　　　　　　　　　fill="rgb(121,0,121)">pt.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

O efeito após a execução será o seguinte:

Explicação de Uso

x: Define a posição superior esquerda.

y: Define a posição superior.

width: Define a largura.

height: Define a altura.

fill: A propriedade de preenchimento define a cor de preenchimento.