• Назад
• Далее

Говоря о тексте в 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>This is an example text.</text><text>    <tref xlink:href="#example" /></text>

textPath

Этот атрибут извлекаетpath, используя свой атрибут xlink:href и выравнивает вложенный текст по этому пути.

<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>

• Назад
• Далее