<text>

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

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

Примечание: Элемент <text> по умолчанию не переносит текст на следующую строку, для этого необходимо стилизовать его свойством white-space CSS.

Пример

html

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

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr {
      font: italic 40px serif;
      fill: red;
    }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

Атрибуты

x: Координата x начальной точки базовой линии текста или координата x каждого отдельного глифа, если предоставлен список значений. Тип значения: Список (<длина>|<процент>) ; Значение по умолчанию: 0; Анимируемо: да
y: Координата y начальной точки базовой линии текста или координата y каждого отдельного глифа, если предоставлен список значений. Тип значения: Список (<длина>|<процент>) ; Значение по умолчанию: 0; Анимируемо: да
dx: Смещает позицию текста по горизонтали относительно предыдущего текстового элемента или смещает позицию каждого отдельного глифа, если предоставлен список значений. Тип значения: Список (<длина>|<процент>) ; Значение по умолчанию: нет; Анимируемо: да
dy: Смещает позицию текста по вертикали относительно предыдущего текстового элемента или смещает позицию каждого отдельного глифа, если предоставлен список значений. Тип значения: Список (<длина>|<процент>) ; Значение по умолчанию: нет; Анимируемо: да
rotate: Поворачивает ориентацию каждого отдельного глифа. Может поворачивать глифы индивидуально. Тип значения: <список-чисел> ; Значение по умолчанию: нет; Анимируемо: да
lengthAdjust: Как текст растягивается или сжимается, чтобы подогнать его под ширину, определенную атрибутом textLength. Тип значения: spacing|spacingAndGlyphs; Значение по умолчанию: spacing; Анимируемо: да
textLength: Ширина, до которой должен быть масштабирован текст. Тип значения: <длина>|<процент> ; Значение по умолчанию: нет; Анимируемо: да

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

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

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

Спецификация
Scalable Vector Graphics (SVG) 2 # TextElement

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text`	1	12	1.5	8	3	18	4	10.1	2	1.0	3
`dx`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`dy`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`fill`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`lengthAdjust`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`rotate`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`systemLanguage`	1	12	12	≤12.1	3	18	14	≤12.1	2	1.0	3
`textLength`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`x`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`y`	1	12	1.5	15	3	18	4	14	2	1.0	4.4

Другие связанные с текстом элементы SVG: <tspan>, <tref>

См. также

white-space