Inclinando texto com SVG

 Obrigado por visitar esse blog.

Bora lá...

Para inclinar um texto usando SVG veja um modelo de código.

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

A primeira linha de código define a área ocupada ou display.

A segunda linha descreve: xy=vertical/horizontal, rotate= a rotação do texto.

 

Mudando a rotação abaixo.

<svg height="120" width="200">
  <text x="0" y="15" fill="red" transform="rotate(60 20,40)">I love SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

Resultado:

Observe que alterei a tag height, senão a imagem seria cortada.