Расположить текст по кругу с помощью SVG

Выводим текст

Технически размещение текста по кругу - это размещение текста вдоль кривой линии.

Нам понадобятся три компонента:

  • Элемент path с id, который должен располагаться в области defs
  • Элемент text
  • Несколько символов в textPath внутри тега text. textPath должен ссылаться на id тега path

В SVG 1.2 путь представлен тегом path и вы не сможете разместить текст по форме круга (circle) или прямоугольника (rect). Можете воспользоваться JavaScript-конвертером, превращающим атрибуты круга в эквиваленты для элемента path.

Пробуем.


<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="500" height="500">
    <title>Red Hot Chilli Peppers Logo</title>
<defs>
    <path d="M243.2, 382.4c-74.8,   
    0-135.5-60.7-135.5-135.5s60.7-135.5,135.5-135.5s135.5, 60.7, 135.5,
    135.5 S318, 382.4, 243.2, 382.4z" id="textcircle" />
    <style>
        text { 
            font-size: 60px;
            font-family: Franklin Gothic, sans-serif;
            font-weight: 900; 
            text-transform: uppercase;
            letter-spacing: 22px;
        }
    </style>
</defs> 
    <text dy="70" textLength="1200">
        <textPath xlink:href="#textcircle">
            Red Hot Chilli Peppers
        </textPath>
    </text>
</svg>
Red Hot Chilli Peppers Logo Red Hot Chilli Peppers

Пример с анимацией на Codepen

Тут следует сделать несколько замечаний. Текст для удобного чтения должен быть достаточно большим, что в свою очередь будет зависеть от того, насколько велик текст относительно размера элемента path.

Текст всегда будет начинаться в определенной точке пути, это можно настроить.

Если конец текста накладывается на начало текста, то текст будет «кусать себя за хвост», а все затронутые символы станут невидимыми. В нашем примере мы видим только часть текста "Red Hot Chilli Peppers Logo".

Текст стилизуется с помощью типографских свойств CSS, с которыми вы уже должны быть знакомы; различия только в селекторе text, свойстве цвета fill, атрибутах dy и textLength.

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

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


<path d="..." id="textcircle" transform="rotate(90 250 250)" />

Помните, что координаты трансформации в SVG, последние две цифры относятся к viewbox, а не к самому элементу. Или же можно прокрутить круг в векторном редакторе перед экспортированием файла.

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

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

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

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

Текст будет написан в том направлении, в котором нарисован путь. В SVG есть две возможные интерпретации:

Круг по часовой стрелке, тогда основания букв будут располагаться на внешнем кольце пути, т.е. буквы будут «снаружи».

Круг против часовой стрелки, тогда основания букв будут расположены на внутренней окружности пути, т.е. буквы будут внутри.

В SVG2 добавили атрибут side, который значительно упрощает настройку направления текста вдоль пути: значение side для left или right изменит направление текста. Значение side также позволяет расположить текст вокруг или внутри базовой фигуры, такой как прямоугольник и круг. Но к сожалению, на момент написания статьи ни один браузер не поддерживает данную функцию.

В дизайне логотипов очень часто можно встретить две надписи, записанные в противоположных направлениях на одной и той же кривой. Самый знакомый пример - логотип Starbucks Coffee.

Сделать такую надпись в SVG можно двумя способами:

  • Использовать копию пути, но развернутого в другую сторону с новым id и ссылкой на другой текст (понадобится передвинуть символы с помощью атрибута dy)
  • Если два текстовых фрагмента одного размера: использовать новый путь, который касается верхушки нижнего слова. Тогда этот путь будет базовой линией для верхнего слова (но также необходимо развернуть направление одного из путей).

В примере использован второй подход.

Пример на Codepen

Источник: the new code – Placing Text on a Circle with SVG

Вернуться в раздел SVG

Реклама