Як розташувати текст по колу з допомогою SVG

11

Від автора: HTML текст можна крутити і позиціонувати на сторінці за допомогою комбінації CSS трансформацій, але щось більше, ніж просто обертання окремих символів або слів краще віддати на відкуп SVG, у якого для цього є спеціальний елемент – textpath.

Трохи про елементі path

Щоб розмістити текст по потрібній траєкторії в SVG необхідні 3 компонента:

Елемент path з id, який повинен розташовуватися в області defs документа SVG.

Елемент text.

Декілька символів в textPath всередині тега text. textpath повинен посилатися на id тег path.

В SVG 1.2 шлях це обов’язково тег path: ви не зможете згорнути текст за формою circle або rect. Припустивши, що більша частина дизайнерів захоче розмістити текст по колу або еліпса, я почав вирішувати цю проблему.

Є кілька варіантів, Adobe Illustrator або іншому редакторі векторних зображень: якщо перемістити навіть зовсім трохи будь-яку точку фігури, то коло перетвориться на шлях, а точки втечуть; або використовувати Object / Compound Path / Make на колі.

Якщо ж ви дружите з SVG, можете скористатися чудовим JavaScript конвертером, який перетворює атрибути кола в еквіваленти для елемента path.

Додаємо текст

Весь SVG логотип без центральної зірки і анімації можна подивитися на CodePen:

Red Hot Chilli Peppers Logo
text {
font-size: 60px;
font-family: Franklin Gothic, sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 22px;
}
Red Hot Chilli Peppers

Потрібно відзначити лише пару речей:

Абсолютно ясно, що текст для зручного читання повинен бути достатньо великим, що в свою чергу буде залежати від того, наскільки великий текст щодо розміру елемента path.

Текст завжди буде починатися в певній точці шляху, це можна налаштувати (див. нижче).

Якщо обгортка тексту накладається на початок тексту, то текст буде «кусати себе за хвіст», а всі порушені символи стануть невидимими.

Текст стилізується за допомогою друкарських властивостей CSS, з якими ви вже повинні бути знайомі; розходження лише в селекторі text, властивості кольору fill, атрибутах dy і textLength (про них поговоримо нижче).

textLength – у нашому випадку довжина кола – використовується як заміна властивості letter-spacing Firefox, з яким у цьому браузері пов’язаний баг при роботі з SVG.

Ставимо точку старту

Текст буде починатися з того місця, яке в SVG називається «відправною точкою» шляху. Стартову точку можна усунути кількома способами:

найлегше прокрутити шлях до потрібної вам орієнтації, тобто і тест разом з ним:

Пам’ятайте, що координати трансформації в SVG, останні дві цифри відносяться до viewbox, а не до самого елементу. Або ж можна прокрутити коло у векторному редакторі перед экспортированием файлу.

Якщо текст на окружності починається дуже рано і є місце, щоб його зрушити кінець, використовуйте startOffset. Значення цього атрибута визначає стартову точку тексту і вимірюється у відсотках, де 0% — значення за замовчуванням, а 100% (тобто стартова точка зміщена в самий кінець шляху) – максимально можливе значення. Як і раніше, текст, набігаючий на початок рядка, стає невидимим.

У замкненій формі може бути складно визначити стартову точку. Один з найлегших способів – в Illustrator тимчасово включити обведення шляху і кінцеву стрілку end на панелі Обведення (зверніть увагу, можливо вам необхідно включити «Показувати опції» у верхньому правому куті панелі). Тоді стрілка вкаже на стартову точку.

Додати атрибут dx (або Х) до тегу text, з допомогою якого можна рухати текст уздовж шляху (за замовчуванням значення задається в пікселях). На даний момент dx найкраще працює в Firefox, так що я рекомендую використовувати його.

Red Hot Chilli Peppers

Якщо Х або dx задати негативні значення, пропадуть перші літери. В Illustrator можна задати нову стартову точку з допомогою ножиць: клікніть в будь-якому місці на шляху, це і буде стартова точка, але в результаті код стане трохи довше.

Як розташувати текст по колу з допомогою SVG

Реверс напрямку тексту

Текст буде написаний не в тому напрямку, в якому намальований шлях. В SVG є дві можливі інтерпретації:

Коло за годинниковою стрілкою, тоді підстави букв будуть розташовуватися на зовнішньому кільці шляху, тобто букви будуть «зовні»

Коло проти годинникової стрілки, тоді підстави букв будуть розташовані на внутрішній окружності шляху, тобто букви будуть всередині

Як розташувати текст по колу з допомогою SVG

Найпростіший спосіб змінити напрямок шляху в Adobe Illustrator це створити складовою шлях (Object / Compound Path / Make), а потім застосувати Реверс напрямку шляху в панелі Атрибутів (і знову, можливо доведеться активувати Показати опції у верхньому правому куті, щоб побачити ці налаштування).

У SVG2 додали атрибут side, який значно спрощує настройку напрямку тексту вздовж шляху: значення side для left або right змінить напрямок тексту. Значення side також дозволяє розташувати текст навколо або усередині базової фігури, такий як прямокутник і круг. Але на жаль, на момент написання статті жоден браузер не підтримує дану функцію.

Реверс напрямку не вирішує потенційну проблему, коли текст за годинниковою стрілкою розташований на зовнішньому колу, а текст проти годинникової – у внутрішній. Простіше всього це виправити за допомогою атрибута dy і рухати текст вверх або вниз відносно базової лінії шляху. Наприклад:

Red Hot Chilli Peppers

В результаті текст за годинниковою стрілкою зрушиться трохи всередину. Можна використовувати негативні значення для зсуву на внешее кільце.

Протилежні напрями

У дизайні логотипів дуже часто можна зустріти дві написи, записані в протилежних напрямках на одній і тій же кривій. Самий знайомий приклад це всюдисущий логотип Starbucks Coffee.

Як розташувати текст по колу з допомогою SVG

Зробити такий напис в SVG можна двома способами:

Використовувати копію шляху, але розгорнутого в іншу сторону з новим id посиланням на інший текст (знадобиться пересунути символи з допомогою атрибута dy)

Якщо два текстових фрагмента одного розміру: використовувати новий шлях, який стосується верхівки нижнього слова. Тоді цей шлях буде базовою лінією для верхнього слова (але також необхідно розгорнути напрямок одного з шляхів).

У прикладі вище я використовував другий підхід. Код без русалки або зірки по центру:

Starbucks Coffee Logo
Starbucks
Coffee
text {
font-family: Santana-Black, sans-serif;
fill: #fff;
text-transform: uppercase;
font-size: 32px;
}
.coffee { letter-spacing: 6px; }

Побачити, який шлях для якого тексту можна, потягнувши текст за межу секції defs, а також додавши атрибути stroke і stroke-width в демо на CodePen.

Висновок

Може бути кілька причин, за якими ви захочете розмістити текст уздовж шляху:

Ви хочете, щоб текст можна було прочитати, доступним і доброзичливим до SEO

Ви хочете анімувати текст

Ви хочете, щоб текст було легко редагувати або виділяти.

Якщо вам не сподобалися ці техніки, або ви можете вирішити цю проблему по-іншому, може бути, буде легше розбити текст на окремих шляхах і експортувати результат як «заморожений» SVG.

Коло і еліпс не єдині фігури, уздовж яких можна розташувати текст по дорозі. У наступній статті я розповім про інші варіанти.