Масштабируемая векторная графика: работа с текстом
В наших предыдущих постах мы использовали SVG для создания фигур. В этом посте, как сказано в заголовке, мы рассмотрим создание текста с помощью SVG. С текстом можно многое сделать, помимо того, на что способен обычный текст HTML.
Итак, давайте проверим их.
Рекомендуемое чтение: взгляд на масштабируемую векторную графику
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Основная реализация
Но, прежде чем мы пойдем дальше, давайте посмотрим, как текст в SVG формируется на самом базовом уровне:
Текст в SVG, как вы можете видеть из приведенного выше фрагмента кода, определяется достаточно логичным тегом:
Источник изображения: Wikipedia.org
А вот как будет выглядеть текст. На данный момент кажется, что нет разницы с обычным текстом в HTML.
Основные стили текста
Текст также может быть стилизован с помощью CSS-свойств, таких как font-weight, font-style и text-decor, которые могут быть реализованы с помощью встроенного стиля, внутреннего стиля или внешнего стиля, как мы обсуждали в предыдущем посте о Styling SVG с CSS. Вот несколько примеров.
Смелый
курсивный
Подчеркнутый
В некоторых случаях, когда мы хотим применить стили или атрибуты только к определенной части текста, мы можем использовать
Режим письма
Текст написан не только слева направо. В других частях света, например, в Японии, текст пишется сверху вниз. В SVG это можно сделать с помощью атрибута режима записи.
В приведенном выше примере мы поместили несколько случайных японских символов (не спрашивайте меня об их значении, я действительно понятия не имею) и изменили ориентацию с помощью этого объявления стиля, режим письма: tb, где tb обозначает top-to -низ.
Текстовая структура
Текст в SVG — это, в основном, графика, поэтому мы также можем применить атрибут обводки, чтобы добавить линию границы в текст, как мы это делали с другими фигурами.
В приведенном выше фрагменте кода мы добавили атрибут
Путь к тексту
В SVG текст может отображаться не только по горизонтали и вертикали, но также может следовать шаблону контура. Вот как это сделать.
Во-первых, нам нужно определить Путь. Однако создание Path непосредственно в HTML не так интуитивно понятно, нам нужно понимать координаты и некоторые команды, которые, я уверен, большинство из нас постараются избежать. Поэтому, чтобы упростить этот шаг, я лично предлагаю просто открыть векторный редактор (Inkscape или Illustrator), создать путь и сгенерировать код SVG.
Затем положить
Обратите внимание, что мы также добавили атрибут id к
Lorem Ipsum Dolor Sit Amet Concetetur.
Дальнейшее чтение: Пути SVG
Текст градиент
Добавление фона для заливки текста также возможно в SVG, и если вы преуспели в приведенном выше разделе «Путь к тексту», это было бы намного проще.
Сначала нам нужно определить цвета градиента.
Когда все необходимые определения настроены, теперь нам нужно только добавить текст и отнести атрибут fill к атрибуту id градиента следующим образом;
И вот он, текст с градиентом.
Дальнейшее чтение: SVG Градиент и Узор
Дальнейшие ссылки
Текст в SVG, несомненно, мощный, на самом деле мы можем сделать много вещей, помимо того, что мы можем разместить в этом посте. Итак, ниже мы собрали еще несколько ссылок, чтобы удовлетворить ваш интерес к этой теме.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)