alignment-baseline

Атрибут alignment-baseline указывает, как объект выравнивается относительно родительского элемента. Это свойство определяет, какая базовая линия этого элемента должна быть выровнена с соответствующей базовой линией родителя. Например, это позволяет базовым линиям букв в тексте на латинице оставаться выровненными при изменении размера шрифта. По умолчанию используется базовая линия с именем, совпадающим с вычисленным значением свойства alignment-baseline.

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

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

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

auto Устарело

Значение соответствует dominant-baseline скрипта, к которому относится символ, то есть используется dominant-baseline родительского элемента.

baseline

Используется значение dominant-baseline, выбранное для родительского элемента. Соответствующая базовая линия блока совпадает с базовой линией родителя.

before-edge Устарело

Точка выравнивания выравниваемого объекта совпадает с базовой линией «before-edge» родительского текстового элемента.

text-bottom

Нижняя граница блока совпадает с верхней границей области содержимого родительского элемента.

text-before-edge

Точка выравнивания выравниваемого объекта совпадает с базовой линией «text-before-edge» родительского текстового элемента.

Примечание: Это ключевое слово может соответствовать значению text-top.

middle

Вертикальная середина блока выравнивается с базовой линией родительского блока, смещённой на половину высоты x родительского элемента.

central

Центральная базовая линия блока совпадает с центральной базовой линией родительского элемента.

after-edge Устарело

Точка выравнивания выравниваемого объекта совпадает с базовой линией «after-edge» родительского текстового элемента.

text-top

Верхняя граница блока совпадает с верхней границей области содержимого родительского элемента.

text-after-edge

Точка выравнивания выравниваемого объекта совпадает с базовой линией «text-after-edge» родительского текстового элемента.

Примечание: Это ключевое слово может соответствовать значению text-bottom.

ideographic

Нижняя базовая линия иероглифических символов блока совпадает с соответствующей базовой линией родительского элемента.

alphabetic

Алфавитная базовая линия блока совпадает с алфавитной базовой линией родительского элемента.

hanging

Точка выравнивания выравниваемого объекта совпадает с базовой линией «hanging» родительского текстового элемента.

mathematical

Математическая базовая линия блока совпадает с математической базовой линией родительского элемента.

top

Верхняя граница выравниваемого поддерева совпадает с верхней границей строки.

center

Центр выравниваемого поддерева совпадает с центром строки.

bottom

Нижняя граница выравниваемого поддерева совпадает с нижней границей строки.

В SVG 2 внесены некоторые изменения в определение этого свойства. В частности, значения auto, before-edge и after-edge удалены. Для обратной совместимости text-before-edge может соответствовать значению text-top, а text-after-edge — значению text-bottom. Не следует использовать ни text-before-edge, ни text-after-edge со свойством vertical-align.

Пример

<svg
  width="300"
  height="120"
  viewBox="0 0 300 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,10 L60,110
              M30,10 L300,10
              M30,65 L300,65
              M30,110 L300,110
              "
    stroke="grey" />

  <!-- Anchors in action -->
  <text alignment-baseline="hanging" x="60" y="10">A hanging</text>

  <text alignment-baseline="middle" x="60" y="65">A middle</text>

  <text alignment-baseline="baseline" x="60" y="110">A baseline</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="10" r="3" fill="red" />
  <circle cx="60" cy="65" 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>

См. раздел dominant-baseline, чтобы узнать о выравнивании объектов в других элементах (например, <text>).

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

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

См. также

• Свойство CSS alignment-baseline
• Выравнивание по базовой линии в CSS