Текст
Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.
Основы
В getting started мы уже видели, что элемент text
может использоваться для размещения произвольного текста в SVG документах:
<text x="10" y="10">Hello World!</text>
Атрибуты x
и y
задают расположение текста на экране. Атрибут text-anchor
, который может иметь значение start, middle, end или inherit, определяет в каком направлении выравнивать текст относительно заданной точки.
Как и для фигур, тексту можно задать цвет с помощью атрибута fill
и обводку, используя атрибут stroke
. Оба могут быть использованы с gradient
и pattern
элементами, что делает простое изменение цвета текста в SVG очень мощным по сравнению с CSS 2.1.
Настройка свойств шрифта
Шрифт, в котором отображается текст очень важен. SVG предлагает набор атрибутов (многие из которых похожи на их CSS аналоги), позволяющий настроить шрифт. Каждое из следующих свойств может быть установлено как атрибут или с помощью CSS декларации: font-family
, font-style
, font-weight
, font-variant
, font-stretch
, font-size
, font-size-adjust
, kerning
, letter-spacing
, word-spacing
и text-decoration
.
Другие текстовые элементы
tspan
Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в text
элемент или в другой tspan
элемент. Примером является выделение одного слова в предложении красным цветом.
<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
Элемент tspan
имеет следующие атрибуты:
x
Задаёт новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочерёдно применяются к каждому символу tspan
.
dx
Задаёт смещение по горизонтали dx
относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.
Аналогично, для вертикального перемещения текста имеются y и dy атрибуты.
rotate Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочерёдно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.
textLength Атрибут строго задаёт длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.
tref
Элемент tref
позволяет ссылаться на уже существующий текст, эффективно копируя его на своё место. Вы можете использовать атрибут xlink:href
чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника.
<text id="example">This is an example text.</text>
<text>
<tref xlink:href="#example" />
</text>
textPath
Этот атрибут извлекает path
, используя свой атрибут xlink:href и выравнивает вложенный текст по этому пути.
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
<text>
<textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>