text-anchor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

« Справочник 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

<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