text-anchor

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

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

Атрибут 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: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 атрибут

Совместимость браузера

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
text-anchorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Совместимость неизвестна  
Совместимость неизвестна