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

Дата публикации: 2016-03-14

От автора: HTML текст можно крутить и позиционировать на странице при помощи комбинации CSS трансформаций, но что-то большее, чем просто вращение отдельных символов или слов лучше отдать на откуп SVG, у которого для этого есть специальный элемент – textpath.

Немного об элементе path

Чтобы разместить текст по нужной траектории в SVG необходимы 3 компонента:

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

Элемент text.

Несколько символов в textPath внутри тега text. textpath должен ссылаться на id тега path.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Есть несколько вариантов в Adobe Illustrator или другом редакторе векторных изображений: если переместить даже совсем на немного любую точку фигуры, то круг превратится в путь, а точки удалятся; или использовать Object / Compound Path / Make на круге.

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

Добавляем текст

Весь SVG логотип без центральной звезды и анимации можно посмотреть на CodePen:

<svg xmlns="//www.w3.org/2000/svg" 
    xmlns:xlink="//www.w3.org/1999/xlink" viewBox="0 0 500 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>

xmlns:xlink="//www.w3.org/1999/xlink" viewBox="0 0 500 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>

Red Hot Chilli Peppers

</textPath>

</text>

</svg>

Нужно отметить всего пару вещей:

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

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

Если обертка текста накладывается на начало текста, то текст будет «кусать себя за хвост», а все затронутые символы станут невидимыми.

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

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

Задаем точку старта

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

легче всего прокрутить путь до нужной вам ориентации, т.е. и тест вместе с ним:

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

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

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

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

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

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

<text dx="50">
    <textPath xlink:href="#textcircle">
        Red Hot Chilli Peppers
    </textPath>
</text>

Red Hot Chilli Peppers

</textPath>

</text>

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Реверс направления текста

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

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

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

Самый простой способ изменить направление пути в Adobe Illustrator это создать составной путь (Object / Compound Path / Make), а затем применить Реверс направления пути в панели Атрибутов (и опять, возможно придется активировать Показать опции в верхнем правом углу, чтобы увидеть эти настройки).

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

Реверс направления не решает потенциальную проблему, когда текст по часовой стрелке расположен на внешней окружности, а текст против часовой – во внутренней. Проще всего это исправить с помощью атрибута dy и двигать текст вверх или вниз относительно базовой линии пути. К примеру:

<text dy="50">
        <textPath xlink:href="#textcircle">
        Red Hot Chilli Peppers
        </textPath>
</text>

Red Hot Chilli Peppers

</textPath>

</text>

В результате текст по часовой стрелке сдвинется немного внутрь. Можно использовать отрицательные значения для сдвига на внешее кольцо.

Противоположные направления

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

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

Использовать копию пути, но развернутого в другую сторону с новым id и ссылкой на другой текст (понадобится передвинуть символы с помощью атрибута dy)

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

В примере выше я использовал второй подход. Код без русалки или звезды по центру:

<svg xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" viewBox="0 0 200 200">
<title>Starbucks Coffee Logo</title>
<defs>
    <path d="M15,100a85,85 0 1,0 170,0a85,85 0 1,0 -170,0" id="coffeecircle" />
    <path d="M100,37c34.8,0,63,28.2,63,63s-28.2,63-63,63s-63-28.2-63-63S65.2,37,100,37z" id="starbuckscircle" transform="rotate(-85 100 100)" />
</defs>
<circle cx="100" cy="100" r="100" fill="#067655" id="background" />
<circle fill="none" stroke="#FFF" cx="100" cy="100" r="93.8" stroke-width="3" id="rim" />
<text>
    <textPath xlink:href="#starbuckscircle">Starbucks</textPath>
</text>
<text dx="55" textLength="160" class="coffee">
    <textPath xlink:href="#coffeecircle">Coffee</textPath>
</text>
</svg>

<title>Starbucks Coffee Logo</title>

<defs>

</defs>

<text>

<textPath xlink:href="#starbuckscircle">Starbucks</textPath>

</text>

<textPath xlink:href="#coffeecircle">Coffee</textPath>

</text>

</svg>

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

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.

Круг и эллипс не единственные фигуры, вдоль которых можно расположить текст по пути. В следующей статье я расскажу про другие варианты.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее