diff options
Diffstat (limited to 'files/ru/web/svg/элемент/text/index.html')
| -rw-r--r-- | files/ru/web/svg/элемент/text/index.html | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/элемент/text/index.html new file mode 100644 index 0000000000..d63d1b47dd --- /dev/null +++ b/files/ru/web/svg/элемент/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><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> |