diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
commit | c058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch) | |
tree | df20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/web/svg/элемент/text/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2 translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip |
unslug ru: move
Diffstat (limited to 'files/ru/web/svg/элемент/text/index.html')
-rw-r--r-- | files/ru/web/svg/элемент/text/index.html | 211 |
1 files changed, 0 insertions, 211 deletions
diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/элемент/text/index.html deleted file mode 100644 index d63d1b47dd..0000000000 --- a/files/ru/web/svg/элемент/text/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: <text> -slug: Web/SVG/Элемент/<text> -tags: - - NeedsUpdate - - SVG - - SVG text -translation_of: Web/SVG/Element/text ---- -<div>{{SVGRef}}</div> - -<p>SVG элемент <strong><code><text></code></strong> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <code><text></code> можно применить градиент, шаблон, окантовку, маску или фильтр.</p> - -<p>Текст не будет отображаться, если он не находится внутри SVG элемента <code><text></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]"><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> -</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="Основы_использования_элемента_<text>">Основы использования элемента <text></h3> - -<h4 id="SVG">SVG</h4> - -<div id="Примеры2"> -<pre class="brush: html; highlight[4]"><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> -</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"> - -<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> - - -</pre> -</div> - -<h4 id="Результат_2">Результат</h4> - -<p>{{EmbedLiveSample('Реверс', 200, '100%')}}</p> - -<h3 id="Цвет_текста">Цвет текста</h3> - -<p>Цвет текста в SVG-элементе <text> может быть изменён посредством свойства <strong>fill</strong>="[color]" внутри элемента <text>.</p> - -<h4 id="SVG_3">SVG</h4> - -<div id="Цвет"> -<pre class="brush: html"><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> -</pre> -</div> - -<h4 id="Результат_3">Результат</h4> - -<p>{{EmbedLiveSample('SVG_3', 200, '100%')}}</p> - -<h3 id="Применение_CSS-стилей_к_содержимому_элемента_<text>.">Применение CSS-стилей к содержимому элемента <text>.</h3> - -<p>Содержимое SVG элемента <strong><text></strong> может быть стилизовано как обычный текст в HTML.</p> - -<h4 id="SVG_4">SVG</h4> - -<div id="Стиляга"> -<pre class="brush: html"> <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> -</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', '<text>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}</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> |