Elemento <tspan> no SVG

O elemento <tspan> do SVG é usado para desenhar texto em múltiplas linhas no SVG. Não é necessário posicionar absolutamente cada linha de texto, o elemento <tspan> permite que uma linha de texto seja colocada em relação à linha anterior. O elemento <tspan> também permite que o usuário selecione e copie várias linhas de texto de uma vez, não apenas um elemento text.

exemplo de tspan

Este é um exemplo simples de <tspan>:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>linha do <tspan>　1</tspan>
　　　　　　　　<tspan>linha do <tspan>　2</tspan>
　　　　</text>
</svg>

Este é a imagem de resultado:

Observe como o resultado do <tspan> afeta a posição das linhas de texto em relação umas às outras (depois de uma à outra).

posicionamento vertical

Se você quiser posicionar a linha verticalmente em relação às outras, você pode usar a propriedade dy (delta y):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>linha do <tspan>　1</tspan>
　　　　　　　　<tspan dy="10">linha do <tspan>　2</tspan>
　　　　</text>
</svg>

Agora, devido ao segundo elemento <tspan> ter a propriedade dy configurada como " 10". Portanto, a segunda linha de texto é exibida abaixo da primeira linha de texto10pixels. Este é a imagem de resultado:

Para posicionar o elemento <tspan> em uma posição y absoluta, use a propriedade como no elemento <text>.

Se você escrever vários números dentro da propriedade dy, cada número será aplicado a cada caractere dentro do elemento <tspan>. Este é um exemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text x="10" y="15">
　　　　　　　　　　　　<tspan dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

Este é a imagem gerada. Observe como a distância vertical entre os caracteres muda.

posicionamento horizontal

Para posicionar o texto relativamente no eixo x, você pode usar a propriedade dx (delta x). O exemplo a seguir mostra a configuração de dx30 efeito. Observe que agora a segunda linha de texto é exibida abaixo do final da primeira linha de texto (não no início)30 pixels:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>linha do <tspan>　1</tspan>
　　　　　　　　<tspan dx="30" dy="10">linha do <tspan>　2</tspan>
　　　　</text>
</svg>

Este é a imagem de resultado:

Se você especificar vários números dentro da propriedade dx, cada número será aplicado a cada letra dentro do elemento <tspan>. Este é um exemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　<tspan dx="5　10　20">123</tspan>
</text></svg>

Este é a imagem de resultado:

Você também pode configurar a propriedade x para fixar a coordenada x da linha de texto. Isso é útil se você quiser exibir uma lista de linhas não ajustadas uma ao lado da outra. Aqui está um exemplo onde x é configurado para três linhas10　um exemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text y="20">
　　　　　　　　<tspan x="10">linha do <tspan>　1</tspan>
　　　　　　　　<tspan x="10" dy="15">linha do <tspan>　2</tspan>
　　　　　　　　<tspan x="10" dy="15">linha do <tspan>　3</tspan>
　　　　</text>
</svg>

Este é a imagem de resultado:

estilo do elemento <tspan>

Você pode configurar estilos de elementos individualmente. Portanto, você pode usar o elemento <tspan> para configurar o estilo do bloco de texto, para que ele seja diferente do resto do texto. Este é um exemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　Aqui está um <tspan style="font-weight: negrito;">negrito</tspan> palavra.
</text></svg>

Este é a imagem de resultado:

subscritos e superíscritos com deslocamento de linha de base

Você pode usar a linha de base-a propriedade CSS shift é usada para criar subscritos e superíscritos com o elemento <tspan>. Isso é uma linha de base SVG-exemplo de shift, mostrando como:

<svg width="500" height="100">　　　　
<text x="10" y="20">　　　　
Aqui está um texto com <tspan style="baseline"-shift: superescrito">superescrito</tspan>　　　　
e <tspan style="baseline"-shift: subscrito">subscrito</tspan> misturado com normal　　　　
text.　　　　
</text>　　　　
</svg>

Este é a imagem gerada. (Atenção: o Firefox pode não suportar)