<text>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

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

Пример

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>

Атрибуты

Интерфейс 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

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text
dx
dy
fill
context-fill value
lengthAdjust
rotate
systemLanguage
textLength
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

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

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

Связь