The Cat in the Hat Az SVG felajánlja a címkét. Míg sokban működik, mint egy normál HTML, elfogadja azokat az attribútumokat, amelyek hatékony szövegformáló képességeket szabadítanak fel.
Az egyik ilyen tulajdonság az textLength. Ha ezt beállítjuk 100, akkor a becsomagolt szöveg az SVG konténer teljes hosszára kényszerül.
Lásd: Pen SVG szövegzárolás - Geoff Graham (@geoffgraham) 1. lépése a CodePen-en.
A tulajdonságok egyike az lengthAdjust. Ez csak akkor érvényes, ha (vagy ) van beállítva, textLengthés kezeli a szöveg kibontásának vagy tömörítésének módját, hogy illeszkedjen a szóközhöz. Az alapértelmezett érték az, spacingamely megőrzi a betű formáit, de beállítja a karakterek közötti hézagokat. Használhatunk spacingAndGlyphshelyette, és ez beállítja a karakterek alakjának tömörítésének kiterjesztését is, ha a természetes távolság kényelmetlen.
Lásd: Pen SVG szövegzár - Geoff Graham (@geoffgraham) 2. lépése a CodePen-en.
Mint a címke is elfogadja a font-sizetulajdonság, amely nem pontosan úgy, ahogy várnánk: megváltoztatni a szöveg méretét. Ezt használhatjuk a szöveg kiigazítására, ahol az növelés textLengthtúl sok vagy túl kevés helyet hagy, és lengthAdjustelvetemíti a karaktereket.
Ez a három attribútum együttvéve lehetővé teszi számunkra a szöveges lezárások létrehozását. Íme, amit a fenti kivonat eredményeként kapunk, néhány további CSS-sel az extra stílus érdekében:
Lásd: Geoff Graham (@geoffgraham) Pen SVG szövegzárolása a CodePen-en.
Egyéb lezárások
Korábban írtunk a típuszárolásokról:
A típuszárolás tipográfiai tervezés, ahol a szavak és karakterek nagyon pontosan vannak megfogalmazva és elrendezve. Mint a tervezés szó szerint a helyén van rögzítve.
Az SVG tökéletes az ilyesmihez, az átméretezési módja miatt. Az SVG belsejében lévő szöveg nem úgy reflektál, mint a HTML-ben, hanem az SVG egyedi módon skálázódik, ami gyakran a tökéletes képarányon van, amelyre tervezték (bár ezt te is szabályozhatod).
Tehát, ha valami hasonlót tervez olyan vektorszerkesztő szoftverben, mint az Adobe Illustrator:
Lásd Chris Coyier (@chriscoyier) szöveges zárolásának tollpéldáját a CodePen-en.
Olvass tovább.