1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
|
---
title: <text>
slug: Web/SVG/Element/text
tags:
- NeedsUpdate
- SVG
- SVG text
translation_of: Web/SVG/Element/text
original_slug: Web/SVG/Элемент/<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("dx")}}</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>
|
