The Cat in the Hat SVG nabízí značku. I když v HTML funguje podobně jako normální , přijímá atributy, které odemknou výkonné možnosti tvarování textu.
Jedním z těchto atributů je textLength. Pokud nastavíme toto na 100, pak bude zabalený text vynucen na celou délku kontejneru SVG.
Podívejte se na Blokování textu SVG perem - Krok 1, Geoff Graham (@geoffgraham) na CodePen.
Další z těchto atributů je lengthAdjust. To platí pouze v případě, že (nebo ) má sadu textLengtha zpracovává způsob, jakým je text roztažen nebo komprimován tak, aby odpovídal danému prostoru. Výchozí hodnota je, spacingkterá zachovává tvary písmen, ale upravuje mezery mezi znaky. Můžeme spacingAndGlyphsmísto toho použít a to upraví rozbalení a komprimuje také tvar znaků, když je přirozený rozestup nepříjemný.
Podívejte se na blokování textu SVG perem - krok 2, Geoff Graham (@geoffgraham) na CodePen.
Stejně jako je značka také akceptuje font-sizeatribut, který dělá přesně tak, jak by se dalo očekávat: změnit velikost textu. Můžeme to použít k úpravám textu, kde zvětšení textLengthponechává příliš mnoho nebo příliš málo místa a lengthAdjustdeformuje postavy.
Kombinace těchto tří atributů nám dává možnost vytvářet blokování textu. Tady je to, co dostaneme jako výsledek výše uvedeného fragmentu s některými dalšími CSS pro extra styling:
Podívejte se na textové uzamčení SVG pera od Geoffa Grahama (@geoffgraham) na CodePen.
Další blokování
O blokování typů jsme psali dříve:
Blokování typu je typografický design, kde jsou slova a znaky stylizovány a uspořádány velmi konkrétně. Stejně jako design je doslova uzamčen na svém místě.
SVG je pro tento druh věcí ideální, protože se mění jeho velikost. Text uvnitř SVG se nepřeformuluje jako typ v HTML, mění se jedinečným způsobem, jak to dělá SVG, což je často v dokonalém poměru stran, na který byl navržen (i když to můžete ovládat).
Takže pokud něco takového navrhujete v softwaru pro úpravu vektorů, jako je Adobe Illustrator:
Podívejte se na ukázku pera blokování textu od Chrisa Coyiera (@chriscoyier) na CodePen.
Přečtěte si více.