The Cat in the Hat SVG siūlo žymą. Nors jis veikia panašiai kaip įprastas HTML, jis priima atributus, kurie atveria galingas teksto formavimo galimybes.
Vienas iš tų atributų yra textLength. Jei tai nustatysime 100, įvyniotas tekstas bus priverstas per visą SVG konteinerio ilgį.
Žr. „Pen SVG Text Lockup“ - 1 veiksmas, kurį pateikė Geoffas Grahamas (@geoffgraham) „CodePen“.
Kitas iš tų atributų yra lengthAdjust. Tai taikoma tik tada, kai (arba ) yra nustatytas textLengthir tvarko teksto išplėtimo ar glaudinimo būdą, kad tilptų į tą vietą. Numatytoji reikšmė yra ta, spacingkuri išsaugo raidžių formas, bet sureguliuoja spragas tarp simbolių. Mes galime naudoti spacingAndGlyphsvietoj to ir tai pakoreguos simbolių formos suspaustą išplėtimą, kai natūralus tarpas yra nepatogus.
Žr. Geoffo Grahamo (@geoffgraham) „Pen SVG“ teksto blokavimą - 2 veiksmas „CodePen“.
Panašiai kaip žyma taip pat priima font-sizeatributą, kuris veikia tiksliai taip, kaip galite tikėtis: pakeiskite teksto dydį. Mes galime tai naudoti norėdami pakoreguoti tekstą, kai padidinus textLengthpaliekama per daug arba per mažai vietos ir lengthAdjustiškreipiami simboliai.
Kartu šie trys atributai suteikia mums galimybę sukurti užrakto tekstą. Štai ką mes gauname iš aukščiau esančio fragmento su papildomu CSS papildomam stiliui:
Žr. Geoffo Grahamo (@geoffgraham) „Pen SVG“ teksto blokavimą „CodePen“.
Kiti užraktai
Apie tipo užrakinimus jau rašėme anksčiau:
Tipo užraktas yra tipografinis dizainas, kai žodžiai ir simboliai yra sukurti ir išdėstyti labai konkrečiai. Kaip dizainas yra tiesiog užrakintas vietoje.
SVG puikiai tinka tokiems dalykams, nes jis keičia dydį. SVG viduje esantis tekstas neatspindi panašaus tipo HTML, jis keičia mastelį unikaliu būdu, kurį daro SVG, kuris dažnai yra tobulo formato santykis, kuriuo jis buvo sukurtas (nors tai galite valdyti).
Taigi, jei kuriate kažką panašaus į vektorinę redagavimo programinę įrangą, pvz., „Adobe Illustrator“:
Žr. Chriso Coyierio (@chriscoyier) „CodePen“ teksto užrakinimo pavyzdį.
Skaityti daugiau.