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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-anchor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support