The Cat in the Hat SVG tarjoaa tunnisteen. Vaikka se toimii paljon kuin normaali HTML, se hyväksyy määritteet, jotka avaavat tehokkaat tekstinmuokkausominaisuudet.
Yksi näistä ominaisuuksista on textLength. Jos asetamme tämän arvoksi 100, kääritty teksti pakotetaan SVG-säiliön koko pituudeksi.
Katso Kynän SVG-tekstin lukitus - vaihe 1, kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.
Toinen näistä ominaisuuksista on lengthAdjust. Tämä pätee vain, kun (tai ) on asetettu textLengthja käsittelee tapaa, jolla teksti laajennetaan tai pakataan tilaan sopivaksi. Oletusarvo on se, spacingjoka säilyttää kirjaimen muodot, mutta säätää merkkien välisiä aukkoja. Voimme käyttää spacingAndGlyphssen sijaan ja se säätää merkkien muodon pakkaamisen laajennusta myös silloin, kun luonnollinen väli on hankala.
Katso Kynän SVG-tekstin lukitus - vaihe 2, kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.
Kuten The tag hyväksyy myös font-sizemäärite, joka tekee juuri niin kuin voisi odottaa: Muuta tekstin kokoa. Voimme käyttää sitä tekstin säätöihin, kun lisääntyminen textLengthjättää liikaa tai liian vähän tilaa ja lengthAdjustloimii hahmot.
Yhdistettynä nämä kolme ominaisuutta antavat meille mahdollisuuden luoda tekstilukkoja. Tässä on mitä saamme yllä olevasta katkelmasta, jossa on ylimääräinen CSS ylimääräiseen muotoiluun:
Katso Geoff Grahamin (@geoffgraham) Pen SVG -tekstilukitus CodePenistä.
Muut lukot
Olemme kirjoittaneet tyypin lukituksista aiemmin:
Tyyppilukko on typografinen suunnittelu, jossa sanat ja merkit on muotoiltu ja järjestetty hyvin tarkasti. Kuten muotoilu on kirjaimellisesti lukittu paikalleen.
SVG on täydellinen tällaisille asioille, koska se muuttaa kokoa. SVG: n sisällä oleva teksti ei heijastu kuten HTML-tyyppinen teksti, se skaalautuu ainutlaatuisella tavalla SVG: llä, joka on usein täydellisellä kuvasuhteella, jolla se on suunniteltu (vaikka voit hallita sitä).
Joten jos suunnittelet jotain tällaista vektorieditointiohjelmistossa, kuten Adobe Illustrator:
Katso kynäesimerkki Chris Coyierin (@chriscoyier) tekstilukituksesta CodePenissä.
Lue lisää.