—»     —»   Масштабируемая векторная графика (SVG) - Работаем с текстом
  Раздел: Образование и Изучение   Нет комментариев  

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bold

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

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

Italic

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

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

Underline

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

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

Элемент «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>

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

Режим написания (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) - Работаем с текстом

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

Текст в 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) - Работаем с текстом

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

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

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

Масштабируемая векторная графика (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) - Работаем с текстом

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

Мы также можем добавить фон текста в 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) - Работаем с текстом

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

Текст на 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)

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: векторная графика
Опубликовал Design FactoRy   Прочитано (раз): 5322   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31