The Cat in the Hat SVG oferece a tag. Embora funcione como um normal em HTML, ele aceita atributos que desbloqueiam recursos poderosos de modelagem de texto.
Um desses atributos é textLength. Se definirmos isso como 100, o texto empacotado será forçado para o comprimento total do contêiner SVG.
Veja o Bloqueio de texto da caneta SVG - Etapa 1 por Geoff Graham (@geoffgraham) no CodePen.
Outro desses atributos é lengthAdjust. Isso se aplica apenas quando (ou ) tem um conjunto textLengthe controla a maneira como o texto é expandido ou compactado para caber naquele espaço. O valor padrão spacingpreserva as formas das letras, mas ajusta os espaços entre os caracteres. Podemos usar em spacingAndGlyphsvez disso e isso irá ajustar, expandir ou comprimir a forma dos caracteres também para quando o espaçamento natural for estranho.
Veja o Bloqueio de texto da caneta SVG - Etapa 2 por Geoff Graham (@geoffgraham) no CodePen.
Por exemplo , a tag também aceita um font-sizeatributo que faz exatamente o que você espera: altera o tamanho do texto. Podemos usar isso para fazer ajustes no texto onde o aumento textLengthdeixa muito ou pouco espaço e lengthAdjustdistorce os caracteres.
Combinados, esses três atributos nos dão a capacidade de criar travamentos de texto. Aqui está o que obtemos como resultado do snippet acima com algum CSS adicional para estilo extra:
Veja o Pen SVG Text Lockup de Geoff Graham (@geoffgraham) no CodePen.
Outros travamentos
Já escrevemos sobre travamentos de tipo antes:
Um tipo de bloqueio é um design tipográfico onde as palavras e os caracteres são estilizados e organizados de maneira muito específica. Como se o design estivesse literalmente travado no lugar.
O SVG é perfeito para esse tipo de coisa, por causa da maneira como é redimensionado. O texto dentro de SVG não reflui como o tipo em HTML, ele é dimensionado da maneira única que o SVG faz, que geralmente está na proporção perfeita em que foi projetado (embora você possa controlar isso).
Portanto, se você criar algo assim em um software de edição vetorial como o Adobe Illustrator:
Veja o exemplo da caneta de um texto bloqueado por Chris Coyier (@chriscoyier) no CodePen.
Consulte Mais informação.