The Cat in the Hat SVG offre il tag. Sebbene funzioni in modo molto simile a un normale in HTML, accetta attributi che sbloccano potenti capacità di modellazione del testo.
Uno di questi attributi è textLength. Se lo impostiamo su 100, il testo racchiuso in esso sarà forzato per l'intera lunghezza del contenitore SVG.
Vedere il blocco del testo SVG della penna - Passaggio 1 di Geoff Graham (@geoffgraham) su CodePen.
Un altro di questi attributi è lengthAdjust. Questo si applica solo quando (o ) ha un set textLengthe gestisce il modo in cui il testo viene espanso o compresso per adattarsi a quello spazio. Il valore predefinito è spacingche preserva le forme delle lettere ma regola gli spazi tra i caratteri. Possiamo usare spacingAndGlyphsinvece e questo aggiusterà espandere o comprimere la forma dei caratteri anche per quando la spaziatura naturale è scomoda.
Vedere il blocco del testo SVG della penna - Passaggio 2 di Geoff Graham (@geoffgraham) su CodePen.
Ad esempio , il tag accetta anche un font-sizeattributo che funziona esattamente come potresti aspettarti: cambia la dimensione del testo. Possiamo usarlo per apportare modifiche al testo in cui l'aumento textLengthlascia troppo o troppo poco spazio e lengthAdjustdeforma i caratteri fuori di testa.
Combinati insieme, questi tre attributi ci danno la possibilità di creare blocchi di testo. Ecco cosa otteniamo come risultato dello snippet sopra con alcuni CSS aggiuntivi per uno stile extra:
Vedi Pen SVG Text Lockup di Geoff Graham (@geoffgraham) su CodePen.
Altri blocchi
Abbiamo già scritto sui blocchi di tipo:
Un blocco del tipo è un design tipografico in cui le parole ei caratteri sono stilizzati e disposti in modo molto specifico. Come se il design fosse letteralmente bloccato.
SVG è perfetto per questo genere di cose, a causa del modo in cui si ridimensiona. Il testo all'interno di SVG non scorre come fa il tipo in HTML, si ridimensiona nel modo unico in cui fa SVG, che spesso è con le proporzioni perfette per le quali è stato progettato (sebbene tu possa controllarlo).
Quindi, se progetti qualcosa di simile in un software di editing vettoriale come Adobe Illustrator:
Vedere l'esempio di penna di un blocco di testo di Chris Coyier (@chriscoyier) su CodePen.
Per saperne di più.