textPath

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.

* Some parts of this feature may have varying levels of support.

Assim como o texto escrito em uma linha reta, o SVG também inclui a capacidade de colocar um texto ao longo de uma forma de um elemento<path>. Para especificar que um bloco de texto é renderizado ao longo da forma de um<path>, inclua o texto em um elementotextPath o qual inclui um atributoxlink:href com uma referência a um elemento<path>.

Contexto de uso

Categorias	Elemento de conteúdo textual, Elemento filho de conteúdo textual
Conteúdo permitido	Dados de caracteres e qualquer número dos seguintes elementos, em qualquer ordem: Elementos descritivos `<a>`,`<animate>`,`<set>`,`<tspan>`

Exemplo

html

<svg  width="100%"  height="100%"  viewBox="0 0 1000 300"  xmlns="https://www.w3.org/2000/svg"  xmlns:xlink="https://www.w3.org/1999/xlink">  <defs>    <path           d="M 100 200             C 200 100 300   0 400 100             C 500 200 600 300 700 200             C 800 100 900 100 900 100" />  </defs>  <use xlink:href="#MyPath" fill="none" stroke="red" />  <text font-family="Verdana" font-size="42.5">    <textPath xlink:href="#MyPath">      Nós vamos para cima, para baixo, para cima    </textPath>  </text>  <!-- Show outline of the viewport using 'rect' element -->  <rect    x="1"    y="1"    width="998"    height="298"    fill="none"    stroke="black"    stroke-width="2" /></svg>

Resultado: