Как вставить текст в svg
Работаем с текстом
Выводим текст
Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.
Нужно следить за размерами viewBox, чтобы длинный текст уместился в контейнере.
Как и в HTML, лишние пробелы игнорируются.
Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.
Атрибуты
Стилизация
Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.
Подчеркнутый кот средствами SVG
Частичная стилизация через
Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент к разным частям текста в строке.
Цвет текста задаётся через свойство fill.
Режим вывода текста
Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.
Добавление текста в заголовок страницы
Можно сделать красивый заголовок на странице, используя CSS:
SVG будет автоматически подстраиваться под размеры контейнера.
SVG может использовать любой шрифт, встроенный в страницу или из CSS. Текст доступен для поисковых роботов.
SVG-текст можно сделать ссылкой.
Но в этом случае вы не сможете использовать встроенный шрифт. Текст будет доступен для поисковых систем, но его нельзя скопировать.
Обводка текста
Обводка для текста делается похожим образом, как в CSS, только вместо указания цвета для текста нужно использовать свойство fill. Если цвет не указан, то используется чёрный цвет.
Обведи кота вокруг пальца
Присвоим атрибуту fill значение none, чтобы оставить только обводку.
Обведи кота вокруг пальца
При желании можно вынести код в стили.
Градиент
Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.
Текст вдоль кривой линии
Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.
Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:
Пример размещения текста вдоль окружности вынесен в отдельную статью.
Текст в SVG
Продолжаем изучать векторную графику, на этот раз разберемся с текстами в SVG, которые позволяют делать гораздо больше, чем обычный HTML.
Прежде всего рассмотрим основной синтаксис, который представляет собой тег text c координатам x и y, определяющими baseline:
Такой SVG-текст ничем не отличается от обычного:
Стилизация
Текст может быть стилизован с помощью CSS: font-weight, font-style, и text-decoration, как и обычный HTML. Если необходимо применить стиль к отдельному элементу, то необходимо использовать тег tspan:
Способ написания
Можно изменять ориентацию текста с обычной (слева направо) на какую-то другую, например как в Японии, сверху вниз с помощью конструкции writing-mode: tb, где tb — это «top-to-bottom»
Контур текста
SVG-текст — это в первую очередь векторное изображение, поэтому с помощью outline можно добавить обводку и изменить заливку с помощью fill:
Направляющие
В SVG текст можно отображать не только горизонтально или вертикально, но и по направляющей — любой векторной кривой. Аналогию можно найти в графическом редакторе (например Adobe Illustrator), используя инструмент Pen Tool:
В коде должны быть теги path и defs:
Также необходимо с помощью textPath «запустить» текст по направляющей:
Градиент
Также можно добавить градиент для заливки текста. Сначала необходимо задать цвета:
А затем применить градиент с помощью fill:
Шрифты
Чтобы использовать web-safe шрифты, достаточно простой конструкции (демо):
Для использования @font-face необходимо объявить шрифты в теге defs, тогда принцип работы будет такой же, как в HTML (демо):
Выводы
Использование SVG-текста, безусловно, намного более гибко, чем обычный HTML. Главное — уметь правильно и к месту применять этот инструмент. Стоит напомнить, что SVG не поддерживается в IE 8 и ниже.
Текст
Основы
В getting started мы уже видели, что элемент text может использоваться для размещения произвольного текста в SVG документах:
Настройка свойств шрифта
Другие текстовые элементы
tspan
Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в text элемент или в другой tspan элемент. Примером является выделение одного слова в предложении красным цветом.
Элемент tspan имеет следующие атрибуты:
dx
Задаёт смещение по горизонтали dx относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.
Аналогично, для вертикального перемещения текста имеются y и dy атрибуты.
rotate
Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочерёдно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.
textLength
Атрибут строго задаёт длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.
Элемент tref позволяет ссылаться на уже существующий текст, эффективно копируя его на своё место. Вы можете использовать атрибут xlink:href чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника.
textPath
SVG: текст в векторной графике
В предыдущих уроках серии мы рассмотрели основы работы с SVG в HTML. Данный урок будет посвящен использованию текста в векторной графике.
Основы
Вот так формируется текст в SVG:
Текст в элементе SVG определяется с помощью тега
В таком формате отличий от обычного текста HTML не наблюдается.
Основные стили текста
Жирный текст
Курсив
Подчеркнутый текст
Используем элемент
Режим вывода текста
Обводка текста
В SVG текст является графикой, и мы можем применять для него атрибут stroke и определять линию обводки, как для других графических объектов.
В выше приведенном примере мы добавили атрибут stroke к элементу
Текст по линии
В SVG текст может выводиться не только вертикально или горизонтально, но и по заданной линии.
Для начала нужно определить траекторию. Однако создание траектории непосредственно в HTML достаточно трудоемкое занятие. Можно воспользоваться векторным редактором (Inkscape или Illustrator), создать нужную траекторию и сохранить SVG код.
Затем взять элемент
Обратите внимание, что мы добавили атрибут id к элементу
. Теперь нужно привязать траекторию с идентификатором id к нашему тексту в элементе
Градиент
Заполнение текста также возможно в SVG.
Сначала нужно определить цвета градиента.
Когда все необходимые определения установлены нужно только добавить текст и связать атрибут fill с атрибутом id градиента:
В следующем уроке мы рассмотрим анимации SVG графики.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/scalable-vector-graphics-text/
Перевел: Сергей Фастунов
Урок создан: 26 Декабря 2012
Просмотров: 34581
Правила перепечатки
5 последних уроков рубрики «Разное»
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Разработка веб-сайтов с помощью онлайн платформы Wrike
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
Добавление текста в SVG формат
Как в исходник (см. ниже) SVG формата добавить текст, чтобы можно было придать оформление в качестве CSS стилей: центровка, выравнивание по вертикали, цвет, размер шрифта и т.д и т.п. (без иллюстратора и каких либо графических редакторов)?
3 ответа 3
В svg для отображения текста тег
, только поместить его надо под фигурой, т.к. элементы svg отображаются в том порядке, в котором они идут в разметке:
?? Только сейчас пришло в голову про это
1. Позиционирование текста с помощью атрибута text-anchor
2. dominant-baseline
3. позиционирование строк многострочного текста с помощью tspan
Когда объект достаточно большой и имеет много мелких деталей, то лучше наносить текстовую информацию не на карту например, а выводить в виде подсказок.
Для вывода текста в подсказке при наведении на svg элемент есть тег
Чтобы подсказка заработала, необходимо обернуть svg элемент в групповой тег
Ниже для примера приведена карта Казахстана.
Для вывода подсказки дождитесь конца анимации прорисовки карты и наведите курсор на окружность обозначающую место положение столицы Казахстана или на саму карту Казахстана, подсказки будут разные.