The Cat in the Hat SVG pakub silti. Kuigi see toimib HTML-i sarnaselt tavapärasega , aktsepteerib see atribuute, mis avavad võimsaid tekstikujundusvõimalusi.
Üks neist atribuutidest on textLength. Kui määrame selle väärtuseks 100, sunnitakse pakitud tekst SVG konteineri täispikkuses.
Vaadake koodi SVP tekstipüstolit SVG-teksti lukustamine - Geoff Graham (@geoffgraham) 1. toiming.
Teine neist atribuutidest on lengthAdjust. See kehtib ainult siis, kui (või ) on komplekt textLengthja haldab viisi, kuidas teksti sellesse ruumi mahutatakse või tihendatakse. Vaikeväärtus on see, spacingmis säilitab tähekujud, kuid kohandab märkide vahelisi tühimikke. Saame spacingAndGlyphsselle asemel kasutada ja see reguleerib ka märkide kuju kokkusurumise laiendamist, kui loomulik vahe on ebamugav.
Vaadake CodePenil pliiatsi SVG teksti lukustamist - Geoff Graham (@geoffgraham) 2. toiming.
Nagu on silt ka aktsepteerib font-sizeatribuut, mis teeb täpselt nii, nagu te võite arvata: muuta teksti suurust. Saame seda kasutada teksti kohandamiseks, kui suurendamine textLengthjätab liiga palju või liiga vähe ruumi ja lengthAdjustväänab tähemärgid välja.
Kombineerituna annavad need kolm atribuuti meile võimaluse tekitada tekstilukustusi. Siin on see, mida saame ülaltoodud jupi tulemusena koos täiendava stiiliga täiendava CSS-iga:
Vaadake CodePenil Geoff Grahami (@geoffgraham) pliiatsi Pen SVG tekstilukk.
Muud lukud
Oleme tüübilukkudest varem kirjutanud:
Tüübilukk on tüpograafiline kujundus, kus sõnad ja tähemärgid on kujundatud ja paigutatud väga konkreetselt. Nagu disain oleks sõna otseses mõttes lukustatud.
SVG sobib sellisteks asjadeks suurepäraselt selle suuruse muutmise viisi tõttu. SVG-s olev tekst ei kajastu nagu HTML-is, vaid see skaleeritakse ainulaadsel viisil, mida SVG teeb, mis on sageli ideaalse kuvasuhtega, mille jaoks see oli mõeldud (kuigi saate seda kontrollida).
Nii et kui kujundate midagi sellist vektoritöötlustarkvaras nagu Adobe Illustrator:
Vaadake Chris Coyieri (@chriscoyier) pliiatsinäidet CodePenist.
Loe rohkem.