вертикальное выравнивание текстового элемента в SVG

Предположим, у меня есть файл SVG:

 b a  

Я хочу как-то выровнять вершину a и b . На самом деле, я хочу, чтобы мое позиционирование соответствовало линии roofline вместо baseline !

Свойство 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" .

Interesting Posts

Граница для изображения в Android?

Как вы это называете, когда один интерфейс «наследует» от другого?

Если USB не указан в BIOS в качестве опции загрузки, означает ли это, что компьютер не может загрузиться с USB?

Как я могу форматировать число в строку с ведущими нулями?

Почему структуры не поддерживают наследование?

Как вызвать метод после инициализации бина?

Как использовать общую папку в VirtualBox с AndroVM

Приложение Delphi с логином / выходом из системы – как реализовать?

Вы должны использовать тему Theme.AppCompat (или потомок) с этим действием. Изменить на Theme.AppCompat вызывает другую ошибку

Angular 2 скачать PDF из API и отобразить его в представлении

Spring @ContextConfiguration, как установить правильное местоположение для xml

Как работает JSF 2 ConversationScope?

В чем разница между .*? и. * регулярные выражения?

c ++ Чтение из CSV-файла

Android-событие для изменения состояния подключения к Интернету

Давайте будем гением компьютера.