Работа с текстом в масштабируемой векторной графике (SVG)
В наших предыдущих постах мы использовали SVG для создания фигур. В этом посте, как сказано в названии, мы рассмотрим создание текста с помощью SVG. С текстом можно многое сделать, кроме того, на что способен обычный текст HTML.
Итак, давайте проверим их.
Основная реализация
Но, прежде чем идти дальше, давайте посмотрим, как Текст в SVG формируется на самом базовом уровне:
Текст в SVG, как вы можете видеть из приведенного выше фрагмента кода, определяется с помощью достаточно логического тега., Икс а также Y атрибуты для указания базовых координат.
Источник изображения: Wikipedia.org
А вот как будет выглядеть текст. На данный момент кажется, что нет разницы с обычным текстом в HTML.
Основные стили текста
Текст также может быть стилизован с помощью свойств CSS, таких как начертание шрифта, стиль шрифта, а также текст-отделка который может быть реализован либо через встроенный стиль, внутренний стиль или же Внешний стиль как мы обсуждали в предыдущем посте о Стилизация SVG с помощью CSS. Вот несколько примеров.
Смелый
Это текст в масштабируемой векторной графике (SVG)
курсивный
Это курсивный текст в масштабируемой векторной графике (SVG)
подчеркивание
Это подчеркнутый текст в масштабируемой векторной графике (SVG)
Элемент
В некоторых случаях, когда мы хотим применить стили или атрибуты только к определенной части текста, мы можем использовать
Это жирный ,это курсив а такжеэто подчеркнуто
Режим письма
Текст не только написан с слева направо. В других частях света, например, в Японии, текст написан с сверху вниз. В SVG это можно сделать с помощью режим письма атрибут.
ぁ ぃ ぅ ぇ ぉ か き
В приведенном выше примере мы поместили несколько случайных японских символов (не спрашивайте меня об их значении, я действительно понятия не имею) и изменили ориентацию с помощью этого объявления стиля, режим письма: тб, где Т.Б. это стенд для сверху вниз.
Текстовая структура
Текст в SVG в основном графический, поэтому мы можем также применить Инсульт атрибут для добавления линии границы к тексту, как мы делали с другими фигурами.
В приведенном выше фрагменте кода мы добавили Инсульт приписать заполнить приписывать никто что приведет к следующей текстовой презентации.
Путь к тексту
В SVG текст может отображаться не только по горизонтали и вертикали, но также следовать шаблону пути. Вот как это сделать.
Во-первых, нам нужно определить путь. Однако создание Path непосредственно в HTML не так интуитивно понятно, нам нужно понимать координаты и некоторые команды, которые, я уверен, большинство из нас постараются избежать. Поэтому, чтобы упростить этот шаг, я лично предлагаю просто открыть векторный редактор (Inkscape или Illustrator), создать путь и сгенерировать код SVG..
Затем положить DEFS здесь означает определение.
Обратите внимание, что мы также добавили Я бы приписать Я бы к нашему тексту с
Lorem Ipsum Dolor Sit Amet Concetetur.
Дальнейшее чтение: Пути SVG
Текст градиент
Добавление фона для заливки текста также возможно в SVG, и если вы преуспели в приведенном выше разделе «Путь к тексту», это было бы намного проще.
Во-первых, нам нужно определить цвета градиента.
Когда все необходимые определения настроены, теперь нам нужно только добавить текст и отослать заполнить приписать градиент Я бы атрибут, как следует;
градиент
И вот он, текст с градиентом.
Дальнейшее чтение: SVG Градиент и Узор
Дальнейшие ссылки
Текст в SVG, несомненно, мощный, на самом деле есть много вещей, которые мы можем сделать, помимо того, что мы можем разместить в этом посте. Итак, ниже мы собрали еще несколько ссылок, чтобы удовлетворить ваш интерес к этой теме.
- О шрифтах в SVG - Дивья Маниан
- SVG Text Официальная документация - W3.org
- SVG Довументация в Mozilla Dev. Сеть с примерами и инструментами - MDN
- Атрибут режима записи SVG - MDN
- Посмотреть демо
- Скачать исходный код
