aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/svg/attribute/text-anchor
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/svg/attribute/text-anchor
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/ru/web/svg/attribute/text-anchor')
-rw-r--r--files/ru/web/svg/attribute/text-anchor/index.html107
1 files changed, 107 insertions, 0 deletions
diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html
new file mode 100644
index 0000000000..4a034cfde2
--- /dev/null
+++ b/files/ru/web/svg/attribute/text-anchor/index.html
@@ -0,0 +1,107 @@
+---
+title: text-anchor
+slug: Web/SVG/Attribute/text-anchor
+translation_of: Web/SVG/Attribute/text-anchor
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Справочник SVG Аттрибутов</a></p>
+
+<p>Атрибут <code>text-anchor</code> используется для выравнивания<br>
+ <em>(start-, middle- или end-выравнивание)</em> текстовой строки относительно заданной точки.</p>
+
+<p><strong id="docs-internal-guid-4ea05241-81fa-9da9-3d12-af90b8ff4e53">А</strong>трибут <code>text-anchor</code> применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }}  атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента. </p>
+
+<p>Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="row">Категория</th>
+ <td>Атрибут представления</td>
+ </tr>
+ <tr>
+ <th scope="row">Значение</th>
+ <td>start | middle | end | <strong title="this is the default value">inherit</strong></td>
+ </tr>
+ <tr>
+ <th scope="row">Анимация</th>
+ <td>Да</td>
+ </tr>
+ <tr>
+ <th scope="row">Документ</th>
+ <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2nd Edition)</a></td>
+ </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>start</dt>
+ <dd>
+ <p>Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиаского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.</p>
+ </dd>
+ <dt>middle</dt>
+ <dd>
+ <p>Отрисованные символы  выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка<br>
+ между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой<br>
+ позиции.)</p>
+ </dd>
+ <dt>end</dt>
+ <dd>Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно<br>
+ правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</dd>
+ <dt>Примечание</dt>
+ <dd>В <strong>IE</strong>-11 атрибут <code><strong>text-anchor</strong></code> не имеет эффекта при привязке текста к заданному пути <strong><code>path</code></strong> посредством тега <code><strong>textPath</strong></code>.<br>
+ В приведенном ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+ &lt;meta charset="utf-8"&gt;
+ &lt;title&gt;текст в якорях&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div style="background-color:burlywood; width:866px;height:444px;display:flex;"&gt;
+ &lt;div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;"&gt;
+ &lt;svg viewBox="-50 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+ &lt;!-- Материализация якорей --&gt;
+ &lt;path d="M50, 5 L50,95
+             M20,20 L80,20
+             M20,50 L80,50
+             M20,80 L80,80" stroke="grey"/&gt;
+
+ &lt;!-- Якоря в действии --&gt;
+ &lt;text text-anchor="start"   x="50" y="20"&gt;some start&lt;/text&gt;
+ &lt;text text-anchor="start"   x="50" y="35"&gt;start&lt;/text&gt;
+
+ &lt;text text-anchor="middle"  x="50" y="55"&gt;some middle&lt;/text&gt;
+ &lt;text text-anchor="middle"  x="50" y="70"&gt;middle&lt;/text&gt;
+
+ &lt;text text-anchor="end"     x="50" y="85"&gt;some end&lt;/text&gt;
+ &lt;text text-anchor="end"     x="50" y="100"&gt;end&lt;/text&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Песочницы</strong></p>
+
+<p>{{ EmbedLiveSample('Пример','400','400') }}</p>
+
+
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать  <code>text-anchor</code> атрибут</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
+</ul>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.text-anchor")}}</p>