вертикальное выравнивание текстового элемента в SVG
Предположим, у меня есть файл SVG:
b a Я хочу как-то выровнять вершину a и b . На самом деле, я хочу, чтобы мое позиционирование соответствовало линии roofline вместо baseline !
- Как вертикально выравнивать плавающие элементы неизвестных высот?
- Как отображать элементы списка в виде столбцов?
- Вертикальное выравнивание изображения
- Вертикально выравнивать текст рядом с изображением?
- Как вертикально центрировать контент с переменной высотой в div?
Свойство alignment-baseline – это то, что вы ищете, оно может принимать следующие значения
auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit
Описание от w3c
Это свойство указывает, как объект выравнивается относительно его родителя. Это свойство указывает, какая базовая линия этого элемента должна быть выровнена с соответствующей базой данных родителя. Например, это позволяет использовать алфавитные базовые линии в тексте Roman для выравнивания по всем изменениям размера шрифта. По умолчанию используется базовая линия с тем же именем, что и вычисленное значение свойства alignment-baseline. То есть позиция «идеографической» точки выравнивания в направлении продвижения блока является позицией «идеографической» базовой линии в базовой таблице объекта, который выровнен.
Источник W3C
К сожалению, хотя это и есть «правильный» способ достижения того, что вы после этого, Firefox не реализовал множество атрибутов представления для текстового модуля SVG ( «SVG в Firefox» MDN Documentation )
Согласно спецификации SVG, alignment-baseline применяется только к dominant-baseline .
Возможные значения dominant-baseline :
auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit
Ознакомьтесь с рекомендацией W3C для свойства доминантной базовой линии для получения дополнительной информации о каждом возможном значении.
attr («доминирующая-базовая линия», «центральная»)
Если вы тестируете это в IE, базовая линия и базовая линия выравнивания не поддерживаются.
Самый эффективный способ центрировать текст в IE – использовать что-то подобное с помощью «dy»:
Ya Text
Отрицательное значение сдвинет его, и положительное значение dy сдвинет его. Я нашел, что использование -.4em кажется немного более сосредоточенным по вертикали для меня, чем -5em, но вы будете судьей этого.
Изучив рекомендацию SVG, я пришел к пониманию, что базовые свойства предназначены для размещения текста по сравнению с другим текстом, особенно при смешивании разных шрифтов и языков. Если вы хотите опубликовать текст так, чтобы он был сверху, тогда вам нужно использовать dy = "y + the height of your text" .