text-anchor

Атрибут text-anchor используется для выравнивания (выравнивание по началу, центру или концу) строки предварительно отформатированного текста или автоматически переносимого текста, где область переноса определяется свойством inline-size относительно заданной точки.

Этот атрибут не применим к другим типам автоматически переносимого текста. В этих случаях следует использовать text-align. Для многострочного текста выравнивание происходит для каждой строки.

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

Примечание: В качестве атрибута представления text-anchor может использоваться как свойство CSS. Подробнее см. text-anchor.

Вы можете использовать этот атрибут со следующими элементами SVG:

Пример

html

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110"
    stroke="grey" />

  <!-- Anchors in action -->
  <text text-anchor="start" x="60" y="40">A</text>
  <text text-anchor="middle" x="60" y="75">A</text>
  <text text-anchor="end" x="60" y="110">A</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="40" r="3" fill="red" />
  <circle cx="60" cy="75" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

  <style><![CDATA[
      text {
        font: bold 36px Verdana, Helvetica, Arial, sans-serif;
      }
      ]]></style>
</svg>

Примечания по использованию

Значение по умолчанию	`start`
Значение	`start` \| `middle` \| `end`
Анимируемое	дискретно

start: Отображаемые символы выравниваются таким образом, что начало строки текста находится в начальной текущей позиции текста. Для элемента со значением свойства direction ltr (типично для большинства европейских языков) левая сторона текста отображается в начальной позиции текста. Для элемента со значением свойства direction rtl (типично для арабского и иврита) правая сторона текста отображается в начальной позиции текста. Для элемента с вертикальным основным направлением текста (часто типично для азиатских текстов) верхняя сторона текста отображается в начальной позиции текста.
middle: Отображаемые символы выравниваются таким образом, что середина строки текста находится в текущей позиции текста. (Для текста на пути, концептуально строка текста сначала выкладывается по прямой линии. Определяется середина между началом строки текста и концом строки текста. Затем строка текста отображается на пути с этой серединой, помещённой в текущую позицию текста.)
end: Отображаемые символы смещаются таким образом, что конец результата отображения текста (конечная текущая позиция текста до применения свойства text-anchor) находится в начальной текущей позиции текста. Для элемента со значением свойства direction ltr (типично для большинства европейских языков), правая сторона текста отображается в начальной позиции текста. Для элемента со значением свойства direction rtl (типично для арабского и иврита), левая сторона текста отображается в начальной позиции текста. Для элемента с вертикальным основным направлением текста (часто типично для азиатских текстов) нижняя часть текста отображается в начальной позиции текста.

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # TextAnchoringProperties

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-anchor`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

Элемент SVG <text>
Свойство CSS text-anchor

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor