Текст

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

Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в 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 позволяет ссылаться на уже существующий текст, эффективно копируя его на своё место. Вы можете использовать атрибут xlink:href чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника.

<text id="example">This is an example text.</text>

<text>
    <tref xlink:href="#example" />
</text>

Этот атрибут извлекает 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>

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