diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/svg/attribute/text-anchor | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-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.html | 107 |
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><html> +<head> + <meta charset="utf-8"> + <title>текст в якорях</title> +</head> +<body> +<div style="background-color:burlywood; width:866px;height:444px;display:flex;"> + <div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;"> + <svg viewBox="-50 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <!-- Материализация якорей --> + <path d="M50, 5 L50,95 + M20,20 L80,20 + M20,50 L80,50 + M20,80 L80,80" stroke="grey"/> + + <!-- Якоря в действии --> + <text text-anchor="start" x="50" y="20">some start</text> + <text text-anchor="start" x="50" y="35">start</text> + + <text text-anchor="middle" x="50" y="55">some middle</text> + <text text-anchor="middle" x="50" y="70">middle</text> + + <text text-anchor="end" x="50" y="85">some end</text> + <text text-anchor="end" x="50" y="100">end</text> + </svg> + </div> +</div> +</body> +</html></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> |