Текст
=====

* « Предыдущая статья
* Следующая статья »

Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.

Основы
------

В getting started мы уже видели, что элемент `text` может использоваться для размещения произвольного текста в SVG документах:


```xml
<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` элемент. Примером является выделение одного слова в предложении красным цветом.


```xml
<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` чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника.


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

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

### textPath

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


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

* « Предыдущая статья
* Следующая статья »