Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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>

Result

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
Определение '<text>' в этой спецификации.
Кандидат в рекомендации  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<text>' в этой спецификации.
Рекомендация Initial definition

Browser compatibility

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

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

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

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