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

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

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

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

BCD tables only load in the browser

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

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

Связь