Масштабируемая векторная графика (SVG) - Работаем с текстом

В наших предыдущих статья мы использовали масштабируемую векторную графику (SVG) для создания фигур. Сегодня же, как уже может быть понятно из названия, мы рассмотрим процесс работы с текстом при помощи SVG. Есть множество вещей, которые мы можем сделать с текстом за рамками привычного нам текста в HTML.


Если вы не читали предыдущие части, то мы настоятельно рекомендуем вам с ними ознакомиться:

Масштабируемая векторная графика (SVG) - Исследование
Масштабируемая векторная графика (SVG) - Оформление посредством CSS

Итак, давайте приступим!

Стандартная реализация

Перед тем, как мы пойдем дальше, давайте посмотрим, как текст в SVG формируется на базовом уровне:

<svg>
<text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text>
</svg>

Текст в SVG, как вы можете видеть в отрывке кода, приведенном выше, определяется посредством очень понятного тега «text». Этот элемент требует от вас указания всего 2 атрибутов, x и y, в качестве основных координат.


И тогда текст будет выглядеть следующим образом. Сейчас он вроде бы ничем не отличается от обычного текста в HTML.


Базовые стили текста

Текст также может быть оформлен при помощи CSS-параметров вроде font-weight, font-style и text-decoration, которые могут быть применены как посредством строчной стилизации и внутренней стилизации, так и посредством стилизации в отдельном файле каскадной таблицы стилей. Давайте рассмотрим некоторые примеры:

Bold

<text style="font-weight: bold;">This is text in Scalable Vector Graphic (SVG)</text>

Italic

<text style="font-style: italic;">This is italic text in Scalable Vector Graphic (SVG)</text>

Underline

<text style="text-decoration: underline;">This is underlined text in Scalable Vector Graphic (SVG)</text>

Элемент «tspan»

В некоторых случаях, когда нам нужно применить стили или атрибуты к конкретному отрывку текста, мы можем использовать элемент «tspan». Этот пример отображает нам, как мы можем добавить атрибуты bold, italic или underline к отдельной строке текста.

<text x="0" y="15"><tspan style="font-weight: bold;">This is bold</tspan>, <tspan style="font-style: italic;">this is italic</tspan> and <tspan style="text-decoration: underline;">this is underline</tspan></text>

Режим написания (writing-mode)

Текст можно писать не только слева-направо. Другими словами, в мире, например в Японии, текст пишется сверху-вниз. В SVG это можно реализовать при помощи атрибута writing-mode.

<svg>
<text x="70" y="20" style="writing-mode: tb;" class="japanese">&#12353;&#12355;&#12357;&#12359;&#12361;&#12363;&#12365;</text>
</svg>

В вышеприведенном примере мы разместили несколько случайных японских символов (не спрашивайте об их значении, так как мы не имеем понятия), и изменили направление посредством следующего атрибута writing-mode: tb, где tb отвечает за написание сверху-вниз.


Контуры текста

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

<svg>
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">This is SVG Text</text>
</svg>

В вышеприведенном отрывке кода мы добавили атрибут stroke к элементу «text» и исключили цвет текста, указав значение none атрибуту fill.


Направление текста

В SVG текст может быть отображен не только горизонтально или вертикально, но также может следовать определенному паттерну (пути). Вот как мы это делаем.

Сначала нам нужно определить path (путь). Тем не менее, создание пути напрямую в HTML не так ясно, нам понадобятся координаты и несколько команд, которых многие из нас, мы уверены, постараются избежать. Для того чтобы упросить данный этап, мы просто рекомендуем вам открыть редактор векторной графики (Inkscape или Illustrator), создать путь и сгенерировать SVG-код.


Затем, поместить элемент «path» внутрь элемента «defs». Здесь devs означает определение.

<defs>
<path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>

Обратите внимание, что мы также добавили атрибут id к «path». Теперь нам нужно только привязать path id нашего текста с элементом «textPath»:

<use xlink:href="#textpath"/>
<text x="10" y="100">
<textPath xlink:href="#textpath">
Lorem ipsum dolor sit amet consectetur.
</textPath>
</text>

Градиент текста

Мы также можем добавить фон текста в SVG, и если вы справились с предыдущим примером, то этот покажется вам гораздо более простым.

Для начала, нам нужно определить цвета градиента.

<defs>
<linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop stop-color="#999" offset="0%"/>
    <stop stop-color="#111" offset="100%"/>
</linearGradient>
</defs>

Когда все необходимые определения выставлены, нам нужно добавить текст и привязать его атрибут fill к id атрибута градиента следующим образом:

<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text>

Таким образом, мы получили текст с градиентом.


Дополнительные ссылки

Текст на SVG, несомненно, мощный инструмент, но есть еще много всего, о чем следует знать. Ниже мы подготовили для вас сборку полезных руководств, которые расскажут вам немного больше.

* About Fonts in SVG – Divya Manian (О шрифтах в SVG)
* SVG Text Official Documentation – W3.org (Официальная документация SVG Text)
* SVG Doсumentation at Mozilla Dev. Network with Examples and Tools – MDN (Документация, примеры и инструменты SVG от сети разработчиков Mozilla)
* SVG Writing Mode Attribute – MDN (Атрибут режима написания на SVG)
* Write Japanase HTML Characters – Peer Wandel Hansen (Пишем по-японски при помощи HTML)

Посмотреть демо | Скачать исходный код