<text>

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

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

Пример

<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

<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

<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

<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

  <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) 1.1 (Second Edition)
# TextElement

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

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

BCD tables only load in the browser

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

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

Связь