unslug ru: move

1 files changed, 211 insertions, 0 deletions

diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.html
new file mode 100644
index 0000000000..d63d1b47dd
--- /dev/null
+++ b/files/ru/web/svg/element/text/index.html
@@ -0,0 +1,211 @@
+---
+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>