Масштабируемая векторная графика: работа с текстом

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

Итак, давайте проверим их.

Рекомендуемое чтение: взгляд на масштабируемую векторную графику

Основная реализация

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

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

Источник изображения: Wikipedia.org

А вот как будет выглядеть текст. На данный момент кажется, что нет разницы с обычным текстом в HTML.

Основные стили текста

Текст также может быть стилизован с помощью CSS-свойств, таких как font-weight, font-style и text-decor, которые могут быть реализованы с помощью встроенного стиля, внутреннего стиля или внешнего стиля, как мы обсуждали в предыдущем посте о Styling SVG с CSS. Вот несколько примеров.
Смелый

Это текст в масштабируемой векторной графике (SVG)

курсивный

Это курсивный текст в масштабируемой векторной графике (SVG)

Подчеркнутый

Это подчеркнутый текст в масштабируемой векторной графике (SVG)

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

Это жирный, это курсив и это подчеркнуто

Режим письма

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

ぁ ぃ ぅ ぇ ぉ か き

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

Текстовая структура

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

В приведенном выше фрагменте кода мы добавили атрибут элемент и удалите цвет текста, указав атрибут заливки none, что приведет к следующему текстовому представлению.

Путь к тексту

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

Во-первых, нам нужно определить Путь. Однако создание Path непосредственно в HTML не так интуитивно понятно, нам нужно понимать координаты и некоторые команды, которые, я уверен, большинство из нас постараются избежать. Поэтому, чтобы упростить этот шаг, я лично предлагаю просто открыть векторный редактор (Inkscape или Illustrator), создать путь и сгенерировать код SVG.

Затем положить элемент внутри элемент. Определения здесь означают определение.

Обратите внимание, что мы также добавили атрибут id к , Теперь нам нужно только связать идентификатор пути с нашим текстом элемент, как так;

Lorem Ipsum Dolor Sit Amet Concetetur.

Дальнейшее чтение: Пути SVG

Текст градиент

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

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

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

градиент

И вот он, текст с градиентом.

Дальнейшее чтение: SVG Градиент и Узор

Дальнейшие ссылки

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