path: root/files/ru/web/svg/element/text/index.html

---
title: <text>
slug: Web/SVG/Элемент/<text>
tags:
  - NeedsUpdate
  - SVG
  - SVG text
translation_of: Web/SVG/Element/text
---
<div>{{SVGRef}}</div>

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

<p>Текст не будет отображаться, если он не находится внутри SVG элемента <code>&lt;text&gt;</code>. Это отличается от сокрытия по умолчанию, поскольку установка <a href="/en-US/docs/Web/SVG/Attribute/display">свойства display</a> не отображает текст.</p>

<h2 id="Пример">Пример</h2>

<div id="Пример1">
<div class="hidden">
<pre class="brush: css">   html,body,svg { height:100% }
 </pre>
</div>

<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;style&gt;
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Обратите внимание, что цвет текста задается с помощью        *
     * fill свойства, а свойство color используется только для HTML */
    .Rrrrr { font: italic 40px serif; fill: red; }
  &lt;/style&gt;

  &lt;text x="20" y="35" class="small"&gt;Мой&lt;/text&gt;
  &lt;text x="60" y="35" class="heavy"&gt;кот&lt;/text&gt;
  &lt;text x="60" y="55" class="small"&gt;очень&lt;/text&gt;
  &lt;text x="100" y="55" class="Rrrrr"&gt;Сердит!&lt;/text&gt;
&lt;/svg&gt;
</pre>
</div>

<p>{{EmbedLiveSample('Пример', 150, '100%')}}</p>

<h2 id="Атрибуты">Атрибуты</h2>

<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>

<ul>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты обработки</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Графические атрибуты событий</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты представления</a></li>
 <li>{{SVGAttr("class")}}</li>
 <li>{{SVGAttr("style")}}</li>
 <li>{{SVGAttr("transform")}}</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
</ul>

<h3 id="Специфические_атрибуты">Специфические атрибуты</h3>

<ul>
 <li>{{SVGAttr("х")}}</li>
 <li>{{SVGAttr("у")}}</li>
 <li>{{SVGAttr("dх")}}</li>
 <li>{{SVGAttr("dy")}}</li>
 <li>{{SVGAttr("rotate")}}</li>
 <li>{{SVGAttr("textLength")}}</li>
 <li>{{SVGAttr("text-anchor")}}</li>
 <li>{{SVGAttr("lengthAdjust")}}</li>
</ul>

<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>

<p>Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.</p>

<h2 id="Примеры">Примеры</h2>

<h3 id="Основы_использования_элемента_&lt;text>">Основы использования элемента &lt;text&gt;</h3>

<h4 id="SVG">SVG</h4>

<div id="Примеры2">
<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;style&gt;
    .mal { font: italic 16px sans-serif; }
    .hey { font: bold 26px sans-serif; fill: #6de;}
  &lt;/style&gt;
  &lt;text x="0" y="68" class="mal"&gt;- Привет,&lt;/text&gt;
  &lt;text x="110" y="40" class="hey"&gt;Сахалин!&lt;/text&gt;
&lt;/svg&gt;
</pre>
</div>

<h4 id="Результат">Результат</h4>

<p>{{EmbedLiveSample('SVG', 150, '100%')}}</p>

<h3 id="Изменение_направления_написания_текста.">Изменение направления написания текста.</h3>

<p>Направление написания SVG-текста можно сменить на обратное, применив трансформацию.</p>

<h4 id="SVG_2">SVG</h4>

<div id="Реверс">
<pre class="brush: html">

&lt;svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;style&gt;
    .mal {font: italic 16px sans-serif; transform: rotate(180, 50, 50);}
    .hey {font: bold 26px sans-serif; fill: #6de;}
  &lt;/style&gt;
  &lt;text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)"&gt;
    Пример ротации&lt;/text&gt;
  &lt;text x="180" y="40" class="hey"&gt;SVG-текста.&lt;/text&gt;
&lt;/svg&gt;


</pre>
</div>

<h4 id="Результат_2">Результат</h4>

<p>{{EmbedLiveSample('Реверс', 200, '100%')}}</p>

<h3 id="Цвет_текста">Цвет текста</h3>

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

<h4 id="SVG_3">SVG</h4>

<div id="Цвет">
<pre class="brush: html">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;style&gt;
      .gri {font: italic 16px sans-serif; fill: #6dd;}
      .red {font: bold 26px sans-serif; fill: #d66;}
    &lt;/style&gt;
    &lt;text class="gri" x="10" y="30"&gt;Цвет текста&lt;/text&gt;
    &lt;text class="red" x="120" y="30"&gt;SVG.&lt;/text&gt;
&lt;/svg&gt;
</pre>
</div>

<h4 id="Результат_3">Результат</h4>

<p>{{EmbedLiveSample('SVG_3', 200, '100%')}}</p>

<h3 id="Применение_CSS-стилей_к_содержимому_элемента_&lt;text>.">Применение CSS-стилей к содержимому элемента &lt;text&gt;.</h3>

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

<h4 id="SVG_4">SVG</h4>

<div id="Стиляга">
<pre class="brush: html">  &lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;style&gt;
      .stil {font: italic 16px sans-serif;}
      .list {font: bold 26px sans-serif;}
    &lt;/style&gt;
    &lt;text class="stil" x="10" y="30"&gt;Стиль текста&lt;/text&gt;
    &lt;text class="list" x="140" y="30"&gt;SVG.&lt;/text&gt;
&lt;/svg&gt;
</pre>
</div>

<h4 id="Результат_4">Результат</h4>

<p>{{EmbedLiveSample('SVG_4', 200, '100%')}}</p>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Коммент</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG2', 'text.html#TextElement', '&lt;text&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'text.html#TextElement', '&lt;text&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Начальное определение</td>
  </tr>
 </tbody>
</table>

<p>Таблица составлена по информации из <a href="/en-US/docs/Web/SVG/Compatibility_sources">этого источника</a>.</p>

<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>

<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>

<p>{{Compat("svg.elements.text")}}</p>

<h2 id="Контекст_использования">Контекст использования</h2>

<p>{{Svginfo}}</p>

<h2 id="Связь">Связь</h2>

<ul>
 <li>{{SVGElement("tref")}}</li>
 <li>{{SVGElement("tspan")}}</li>
 <li>{{SVGElement("altGlyph")}}</li>
</ul>