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