Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

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

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

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

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

middle

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

end
Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно
правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.
Примечание
В IE-11 атрибут text-anchor не имеет эффекта при привязке текста к заданному пути path посредством тега textPath. В приведенном ниже примере тег path использовался только лишь для отрисовки линий и с расположением текста никак не связан.

Пример

<html>
<head>
    <meta charset="utf-8">
    <title>текст в круге</title>
</head>

<body>
    <div style="background-color:burlywood; width:666px;height:444px;display:flex;">
        <div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;">
<svg viewBox="0 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- Materialisation of anchors -->
    <path d="M50, 5 L50,95 
             M20,20 L80,20 
             M20,50 L80,50 
             M20,80 L80,80" stroke="grey" />
    
    <!-- Anchors in action -->
    <text text-anchor="start"   x="50" y="20">123456A</text>
    <text text-anchor="middle"  x="50" y="50">123456A</text>
    <text text-anchor="end"     x="50" y="80">123456A</text>
</svg>
        </div>
    </div>
</body>
</html>

 

Элементы

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

Метки документа и участники

Внесли вклад в эту страницу: leonrom, theykillimmortal
Обновлялась последний раз: leonrom,