The Cat in the Hat SVG tilbyder mærket. Mens den fungerer meget som en normal i HTML, accepterer den attributter, der låser op for stærke tekstformningsfunktioner.
En af disse egenskaber er textLength. Hvis vi indstiller dette til 100, tvinges teksten indpakket i den fulde længde af SVG-containeren.
Se Pen SVG Text Lockup - Trin 1 af Geoff Graham (@geoffgraham) på CodePen.
En anden af disse attributter er lengthAdjust. Dette gælder kun, når (eller ) har et sæt textLengthog håndterer måden, hvorpå teksten udvides eller komprimeres, så den passer til det rum. Standardværdien er den, spacingder bevarer bogstavformerne, men justerer mellemrummene mellem tegn. Vi kan bruge i spacingAndGlyphsstedet, og det justerer også udvidelse af komprimering af figurernes form, også når den naturlige afstand er akavet.
Se Pen SVG Text Lockup - Trin 2 af Geoff Graham (@geoffgraham) på CodePen.
Ligesom den mærke accepterer også en font-sizeattribut, der gør præcis som man kunne forvente: ændre størrelsen på teksten. Vi kan bruge det til at foretage justeringer af teksten, hvor stigende textLengthefterlader for meget eller for lidt plads og lengthAdjustvrider tegnene ude af whack.
Kombineret sammen giver disse tre attributter os muligheden for at oprette tekstlåsning. Her er hvad vi får som et resultat af uddraget ovenfor med nogle ekstra CSS til ekstra styling:
Se Pen SVG Text Lockup af Geoff Graham (@geoffgraham) på CodePen.
Andre lockups
Vi har skrevet om type lockups før:
En type lockup er et typografisk design, hvor ordene og tegnene er stylet og arrangeret meget specifikt. Ligesom designet er bogstaveligt talt låst på plads.
SVG er perfekt til denne slags ting på grund af den måde, hvorpå det ændrer størrelse. Tekst inde i SVG flyder ikke som type i HTML, den skaleres på den unikke måde, SVG gør, hvilket ofte er i det perfekte billedformat, det blev designet til (selvom du kan kontrollere det).
Så hvis du designer noget som dette i vektorredigeringssoftware som Adobe Illustrator:
Se peneksemplet på en tekstlåsning af Chris Coyier (@chriscoyier) på CodePen.
Læs mere.