We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

missing

Атрибуты

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

Специфические атрибуты

Интерфейс DOM

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

Примеры

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

SVG

<svg xmlns = "http://www.w3.org/2000/svg"
     width = "500" height = "40" viewBox = "0 0 500 40">

  <text x = "0" y = "35" font-family = "Verdana" font-size = "35">
    Hello, out there
  </text>
</svg>

Результат

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

К SVG тексту можно применить трансформацию ввиде изменения направления написания текста.

SVG

<svg xmlns = "http://www.w3.org/2000/svg" width = "180" height = "120">
  <text x = "0" y = "20" transform = "rotate (30 20,40)">
    SVG Text Rotation example
  </text>
</svg>

Результат

Цвет текста

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

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text
  </text>
</svg>

Результат

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

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

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">
  <text x="10" y="40"
      style="font-family: Times New Roman;
             font-size: 44px;
             stroke: #00ff00;
             fill: #0000ff;">
    SVG text styling
  </text>
</svg>

Результат

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

Спецификация Статус Коммент
Scalable Vector Graphics (SVG) 2
Определение '<text>' в этой спецификации.
Кандидат в рекомендации  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<text>' в этой спецификации.
Рекомендация Начальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) IE Opera Safari
Basic support 1.0 (Да) 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 (Да) 1.0 (1.8) Нет (Да) 3.0.4

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

Связь

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: warsan, arturparkhisenko, Evgenjnr
Обновлялась последний раз: warsan,