Texto curvo ao longo de um caminho - CSS-Tricks

Anonim

Nós podemos fazer o texto fluir ao longo de uma linha curva com três ferramentas integradas para a direita em SVG: , e .

The Snippet

 Dangerous Curves Ahead 

Como chegamos lá

Imagine que desenhamos uma linha curva em SVG e atribuímos a ela um ID chamado curve.

Veja o Pen NgwPYB de Geoff Graham (@geoffgraham) no CodePen.

Em seguida, colocamos o conteúdo no SVG usando a tag e atribuímos a ele uma largura que corresponda às viewBoxdimensões do SVG . Não veremos nada ainda, mas sabemos que o texto está lá fora da tela em algum lugar.

Veja a Pen ZyaYOw de Geoff Graham (@geoffgraham) no CodePen.

Nós realmente queremos ver esse texto. Podemos envolver nosso texto na tag e configurá-lo para seguir as linhas de nosso caminho curvo chamando o ID de caminho que definimos anteriormente.

Veja a Pen Kqywpe de Geoff Graham (@geoffgraham) no CodePen.

Agora estamos cozinhando com gás!

Não queremos que a curva seja vista, então vamos dar ao caminho um preenchimento transparente. Também poderíamos fazer isso em CSS, mas estamos aplicando em linha diretamente na marcação SVG por causa deste exemplo.

Veja o Pen xrPbgx de Geoff Graham (@geoffgraham) no CodePen.

O resto é CSS! O tamanho exato da fonte dependerá do próprio texto e de qual família de fontes está sendo usada, mas, uma vez que você encontre o equilíbrio certo, o próprio SVG cuidará da capacidade de resposta e garantirá que tudo permaneça na curva em qualquer escala.

Veja o texto em caneta SVG ao longo de um caminho curvo, de Geoff Graham (@geoffgraham) no CodePen.

Poderíamos aplicar esse mesmo método a qualquer tipo de caminho curvo.

Veja o texto em caneta SVG ao longo de um caminho curvo, de Geoff Graham (@geoffgraham) no CodePen.