The Cat in the Hat SVG ponuja oznako. Čeprav v HTML- ju deluje podobno kot običajno , sprejema atribute, ki odklenejo zmogljive zmožnosti oblikovanja besedila.
Eden od teh lastnosti je textLength. Če to nastavimo na 100, bo zavito besedilo prisiljeno v celotno dolžino vsebnika SVG.
Oglejte si Pen SVG Text Lockup - 1. korak Geoff Graham (@geoffgraham) na CodePen.
Še en od teh lastnosti je lengthAdjust. To velja samo, če ima (ali ) nabor textLengthin obravnava način razširitve ali stiskanja besedila, da ustreza temu prostoru. Privzeta vrednost je tista, spacingki ohranja oblike črk, vendar prilagaja razmike med znaki. spacingAndGlyphsNamesto tega lahko uporabimo in to bo prilagodilo razširitev stiskanja obliko znakov tudi takrat, ko je naravni razmik neroden.
Glejte Pen SVG Text Lockup - 2. korak, avtor Geoff Graham (@geoffgraham) na CodePen.
Kot je oznaka sprejema tudi font-sizeatribut, ki počne točno tako, kot bi lahko pričakovali: spremenite velikost besedila. To lahko uporabimo za prilagoditev besedila, kjer povečanje textLengthpušča preveč ali premalo prostora in lengthAdjustznake odvrne.
Skupaj ti trije atributi omogočajo ustvarjanje zaklepanja besedila. Tukaj dobimo kot rezultat zgornjega delčka z nekaj dodatnimi CSS-ji za dodaten slog:
Oglejte si Pen SVG Text Lockup, avtorja Geoff Graham (@geoffgraham) na CodePen.
Druga zaklepanja
O zaklepanju tipov smo že pisali:
Zaklepanje tipa je tipografska zasnova, pri kateri so besede in znaki zelo natančno oblikovani in razporejeni. Kot da je zasnova dobesedno zaklenjena.
SVG je kot nalašč za tovrstne stvari zaradi načina spreminjanja velikosti. Besedilo v SVG se ne preoblikuje tako kot tip v HTML, temveč se prilagodi na edinstven način, kot to počne SVG, ki je pogosto v popolnem razmerju stranic, kot je bilo zasnovano (čeprav to lahko nadzirate).
Če torej v programski opremi za urejanje vektorjev, kot je Adobe Illustrator, oblikujete kaj takega:
Oglejte si primer zaklepanja besedila Chrisa Coyierja (@chriscoyier) na CodePen.
Preberi več.