The Cat in the Hat SVG предлага маркера. Въпреки че функционира много подобно на нормалното в HTML, той приема атрибути, които отключват мощни възможности за оформяне на текст.
Един от тези атрибути е textLength. Ако зададем това 100, тогава обвитият текст ще бъде принуден до пълната дължина на SVG контейнера.
Вижте Pen SVG Text Lockup - Стъпка 1 от Geoff Graham (@geoffgraham) на CodePen.
Друг от тези атрибути е lengthAdjust. Това важи само когато (или ) има набор textLengthи обработва начина, по който текстът се разширява или компресира, за да се побере в това пространство. Стойността по подразбиране е тази, spacingкоято запазва буквените форми, но коригира празнините между символите. Можем да използваме spacingAndGlyphsвместо това и това ще коригира разгъването на компресирането на формата на символите, както и когато естественото разстояние е неудобно.
Вижте Pen SVG Text Lockup - Стъпка 2 от Geoff Graham (@geoffgraham) на CodePen.
Подобно , тагът също приема font-sizeатрибут, който прави точно както можете да очаквате: променете размера на текста. Можем да го използваме, за да направим корекции в текста, когато увеличаването textLengthоставя твърде много или твърде малко място и lengthAdjustизважда героите от удар.
Комбинирани заедно, тези три атрибута ни дават възможност да създаваме заключване на текст. Ето какво получаваме в резултат на горния фрагмент с някои допълнителни CSS за допълнителен стил:
Вижте Pen SVG Text Lockup от Geoff Graham (@geoffgraham) на CodePen.
Други заключвания
Писали сме за блокиране на типа преди:
Заключването на тип е типографски дизайн, при който думите и символите са стилизирани и подредени много специфично. Както дизайнът буквално е заключен на място.
SVG е идеален за този вид неща, поради начина, по който оразмерява. Текстът в SVG не се преформатира, както го прави текстът в HTML, той се мащабира по уникалния начин, по който SVG прави, което често е в идеалното съотношение на страните, в което е проектирано (въпреки че можете да контролирате това).
Така че, ако проектирате нещо подобно в софтуер за редактиране на вектори като Adobe Illustrator:
Вижте Примера на писалка за заключване на текст от Chris Coyier (@chriscoyier) на CodePen.
Прочетете още.