text-anchor
===========

« Справочник SVG Атрибутов

 Атрибут `text-anchor` используется для выравнивания
 *(start-, middle- или end-выравнивание)* текстовой строки относительно заданной точки.

Атрибут `text-anchor` применяется к каждому отдельному текстовому фрагменту в заданном `<text>` элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения `x` и `y` атрибутов к `<text>` элементу, любого `x` или `y` значения к `<tspan>` (en-US), `<tref>` (en-US) , `<altGlyph>` элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для `<textPath>` (en-US) элемента.

Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.

Контекст использования
----------------------

| Категория | Атрибут представления |
| --- | --- |
| Значение | start | middle | end | **inherit** |
| Анимация | Да |
| Документ | SVG 1.1 (2nd Edition) |

start

Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиатского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.

middle

 Отрисованные символы выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка
 между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой
 позиции.)


end

 Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалентно
 правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.


Примечание

 В **IE**-11 атрибут **`text-anchor`** не имеет эффекта при привязке текста к заданному пути **`path`** посредством тега **`textPath`**.
 В приведённом ниже примере тег **`path`** использовался только лишь для отрисовки линий и с расположением текста никак не связан.


Пример
------


```html
<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>
```

Элементы
--------

Следующие элементы могут использовать `text-anchor` атрибут

* Text content elements
Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.