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>' в этой спецификации.
Рекомендация Начальное определение

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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android ?
dxChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
dyChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
lengthAdjustChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
rotateChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
textLengthChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
xChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
yChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

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

missing

Связь

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

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