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> 

Результат

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

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

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

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка1121.5983
dx Да12 Да Да Да Да
dy Да12 Да Да Да Да
lengthAdjust Да12 Да Да Да Да
rotate Да12 Да Да Да Да
textLength Да12 Да Да Да Да
x Да12 Да Да Да Да
y Да12 Да Да Да Да
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка3 Да Да4 Да3 ?
dx Да Да Да Да Да Да ?
dy Да Да Да Да Да Да ?
lengthAdjust Да Да Да Да Да Да ?
rotate Да Да Да Да Да Да ?
textLength Да Да Да Да Да Да ?
x Да Да Да Да Да Да ?
y Да Да Да Да Да Да ?

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

missing

Связь

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

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