Elemento <textPath> no SVG

O elemento <textpath> do SVG é usado para alinhar o texto ao longo de um caminho (por exemplo, um círculo), resultando em um efeito legal. A forma como diferentes navegadores apresentam o texto ao longo do caminho pode variar, portanto, certifique-se de verificar o aspecto do texto no navegador compatível.

Exemplo online

<svg width="500" height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1　0 0,0　100,0"　/>　　　　
</defs>　　　　
<text x="20" y="80" style="stroke: #000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com tutorial básico.../textPath>　　　　
</text>　　　　
</svg>

Efeito de Imagem Após a Execução:

Atenção ao elemento <path> (dentro do elemento <defs>) que possui a propriedade id. Este valor do id é referenciado pela propriedade xlink:href do <textpath>.

Se o comprimento do caminho for menor que o comprimento do texto, apenas desenha-se a parte do texto dentro do intervalo de extensão do caminho.

Você também pode usar caminhos mais avançados. Este é um exemplo de caminho de texto mais complexo:

<svg width="500" height="200">
　　　　<defs>
　　　　　　　　<path id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20 l100,0 l100,30 q0,100　150,100"/>
　　　　</defs>
　　　　<text x="20" y="40" style="stroke: #000000;">
　　　　　　　　<textPath xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com Tutorial Básico....
　　　　　　　　</textPath>
　　　　</text>
</svg>

Este exemplo define um caminho de texto composto por linha horizontal, linha diagonal e curva.

Efeito de Imagem Após a Execução: