text-anchor

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

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

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

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

• <text>
• <textPath>
• <tspan>

Пример

<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

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

middle

Отображаемые символы выравниваются так, чтобы середина текстовой строки находилась в текущей позиции текста. (При размещении текста на контуре строка текста сначала условно располагается по прямой. Определяется точка посередине между началом и концом текстовой строки. Затем строка текста размещается на контуре так, чтобы эта середина находилась в текущей позиции текста.)

end

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

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

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

См. также

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