<text>
======

SVG элемент **`<text>`** определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу `<text>` можно применить градиент, шаблон, окантовку, маску или фильтр.

Текст не будет отображаться, если он не находится внутри SVG элемента `<text>`. Это отличается от сокрытия по умолчанию, поскольку установка свойства display (en-US) не отображает текст.

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
  <style>
 .small {
 font: italic 13px sans-serif;
 }
 .heavy {
 font: bold 30px sans-serif;
 }

 /\* Обратите внимание, что цвет текста задаётся с помощью \*
 \* fill свойства, а свойство color используется только для HTML \*/
 .Rrrrr {
 font: italic 40px serif;
 fill: red;
 }
 </style>

  <text x="20" y="35" class="small">Мой</text>
  <text x="60" y="35" class="heavy">кот</text>
  <text x="60" y="55" class="small">очень</text>
  <text x="100" y="55" class="Rrrrr">Сердит!</text>
</svg>
```

Атрибуты
--------

### Глобальные атрибуты

* Условные атрибуты обработки
* Основные атрибуты
* Графические атрибуты событий
* Атрибуты представления
* `class`
* `style (en-US)`
* `transform`
* `externalResourcesRequired`
### Специфические атрибуты

* `х`
* `у`
* `dx (en-US)`
* `dy (en-US)`
* `rotate (en-US)`
* `textLength (en-US)`
* `text-anchor`
* `lengthAdjust`
Интерфейс DOM
-------------

Этот элемент реализует интерфейс `SVGTextElement`.

Примеры
-------

### Основы использования элемента <text>

#### SVG


```html
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
  <style>
 .mal {
 font: italic 16px sans-serif;
 }
 .hey {
 font: bold 26px sans-serif;
 fill: #6de;
 }
 </style>
  <text x="0" y="68" class="mal">- Привет,</text>
  <text x="110" y="40" class="hey">Сахалин!</text>
</svg>
```


#### Результат

### Изменение направления написания текста

Направление написания SVG-текста можно сменить на обратное, применив трансформацию.

#### SVG


```html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <style>
 .mal {
 font: italic 16px sans-serif;
 transform: rotate(180, 50, 50);
 }
 .hey {
 font: bold 26px sans-serif;
 fill: #6de;
 }
 </style>
  <text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)">
    Пример ротации
  </text>
  <text x="180" y="40" class="hey">SVG-текста.</text>
</svg>
```


#### Результат

### Цвет текста

Цвет текста в SVG-элементе <text> может быть изменён посредством свойства **fill**="[color]" внутри элемента <text>.

#### SVG


```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <style>
 .gri {
 font: italic 16px sans-serif;
 fill: #6dd;
 }
 .red {
 font: bold 26px sans-serif;
 fill: #d66;
 }
 </style>
  <text class="gri" x="10" y="30">Цвет текста</text>
  <text class="red" x="120" y="30">SVG.</text>
</svg>
```


#### Результат

### Применение CSS-стилей к содержимому элемента <text>

Содержимое SVG элемента **<text>** может быть стилизовано как обычный текст в HTML.

#### SVG


```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <style>
 .stil {
 font: italic 16px sans-serif;
 }
 .list {
 font: bold 26px sans-serif;
 }
 </style>
  <text class="stil" x="10" y="30">Стиль текста</text>
  <text class="list" x="140" y="30">SVG.</text>
</svg>
```


#### Результат

Спецификация
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextElement |

Таблица составлена по информации из этого источника (en-US).

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Контекст использования
----------------------

|  |  |
| --- | --- |
| Категории | Графические элементы, Текстосодержащий элемент |
| Разрешённый контент | Символы и любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описанияДочерние элементы с текстовым контентом`<a>` |

Связь
-----

* `<tref>` (en-US)
* `<tspan>` (en-US)
* `<altGlyph>`