The Cat in the Hat SVG nudi oznaku. Iako u HTML-u funkcionira slično kao normalno , prihvaća atribute koji otključavaju moćne mogućnosti oblikovanja teksta.
Jedan od tih atributa je textLength. Ako to postavimo na 100, tada će umotani tekst biti prisiljen na cijelu dužinu SVG spremnika.
Pogledajte Pen SVG Text Lockup - Korak 1, Geoff Graham (@geoffgraham) na CodePenu.
Još jedan od tih atributa je lengthAdjust. To vrijedi samo kada (ili ) ima skup textLengthi obrađuje način na koji se tekst proširuje ili komprimira kako bi odgovarao tom prostoru. Zadana vrijednost je ona spacingkoja čuva oblike slova, ali podešava razmake između znakova. Umjesto toga možemo koristiti, spacingAndGlyphsa to će prilagoditi proširenje komprimiranja oblika likova i kada je prirodni razmak nezgodan.
Pogledajte zaključavanje teksta SVG olovke - korak 2, Geoff Graham (@geoffgraham) na CodePenu.
Kao , oznaka također prihvaća font-sizeatribut koji radi točno onako kako biste očekivali: promijenite veličinu teksta. To možemo koristiti za prilagođavanje teksta gdje povećavanje textLengthostavlja previše ili premalo prostora i lengthAdjustistiskuje likove iz udaraca.
Kombinirana zajedno, ova tri atributa daju nam mogućnost stvaranja zaključavanja teksta. Evo što dobivamo kao rezultat gornjeg isječka s nekim dodatnim CSS-om za dodatni stil:
Pogledajte Pen SVG Text Lockup, Geoff Graham (@geoffgraham) na CodePen.
Ostala zaključavanja
O zaključavanjima tipova već smo pisali:
Tip zaključavanja je tipografski dizajn gdje su riječi i znakovi vrlo specifično stilizirani i poredani. Kao da je dizajn doslovno zaključan na mjestu.
SVG je savršen za ovakve stvari zbog načina na koji im se mijenja veličina. Tekst unutar SVG-a ne preoblikuje se kao što to radi HTML, on se skalira na jedinstveni način na koji to čini SVG, što je često u savršenom omjeru stranica u kojem je dizajniran (iako to možete kontrolirati).
Dakle, ako dizajnirate ovako nešto u softveru za uređivanje vektora, poput Adobe Illustrator:
Pogledajte Primjer olovke zaključavanja teksta Chrisa Coyiera (@chriscoyier) na CodePenu.
Čitaj više.