The Cat in the Hat SVG пропонує тег. Незважаючи на те, що він працює майже так само, як звичайний HTML, він приймає атрибути, які відкривають потужні можливості формування тексту.
Одним з таких атрибутів є textLength. Якщо ми встановимо для цього значення 100, тоді загорнутий текст буде перенесений на повну довжину контейнера SVG.
Див. Pen SVG Блокування тексту - Крок 1, Джефф Грем (@geoffgraham) на CodePen.
Ще одним із цих атрибутів є lengthAdjust. Це застосовується лише тоді, коли (або ) має набір textLengthі обробляє спосіб розширення або стиснення тексту відповідно до цього простору. Значення за замовчуванням - це те, spacingяке зберігає форми літер, але коригує пробіли між символами. Ми можемо використовувати spacingAndGlyphsзамість цього, і це буде коригувати розширення стиснення форми символів, а також, коли природний інтервал незручний.
Дивіться Pen SVG Text Lockup - Крок 2, Джефф Грем (@geoffgraham) на CodePen.
Подібно , тег також приймає font-sizeатрибут, який робить саме так, як ви могли очікувати: змініть розмір тексту. Ми можемо використовувати це, щоб внести корективи в текст, коли збільшення textLengthзалишає занадто багато або занадто мало місця і lengthAdjustвиводить персонажів з ладу.
У поєднанні ці три атрибути дають нам можливість створювати блокування тексту. Ось що ми отримуємо в результаті наведеного вище фрагмента з деякими додатковими CSS для додаткового стилю:
Дивіться Pen SVG Text Lockup від Geoff Graham (@geoffgraham) на CodePen.
Інші блокування
Ми вже писали про блокування типів:
Блокування типу - це друкарський дизайн, де слова та символи стилізовані та розташовані дуже конкретно. Як дизайн буквально зафіксований на місці.
SVG ідеально підходить для такого роду речей, завдяки тому, як він змінює розмір. Текст у SVG не переробляється так, як це робить текст у HTML, він масштабується унікальним способом, який робить SVG, який часто має ідеальне співвідношення сторін, за яким було розроблено (хоча ви можете цим керувати).
Отже, якщо ви розробляєте щось подібне для програм для редагування векторів, таких як Adobe Illustrator:
Див. Приклад ручки блокування тексту Крісом Койєром (@chriscoyier) на CodePen.
Читати далі.