Скажем, у меня есть файл SVG:
<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x='20' y='60' style="font-size: 60px">b</text>
<text x='100' y='60' style="font-size: 60px">a</text>
</svg>
Я хочу как-то выровнять вершину 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, чтобы размер шрифта изменяется. По умолчанию используется базовый уровень с тем же именем, что и вычисленное значение свойства выравнивания-базовой линии. Это позиции "идеографической" точки выравнивания в block-progression-direction - позиция "идеографического" базовая линия в базовой таблице выравниваемого объекта.
К сожалению, хотя это "правильный" способ достижения того, что вы после него, Firefox не реализовал множество атрибутов презентации для текстового модуля SVG (' SVG в документации "MDN Firefox" )
Согласно спецификации SVG, alignment-baseline применяется только к <tspan>, <textPath>, <tref> и <altGlyph>. Я понимаю, что он используется для смещения объектов из объекта <text> над ними. Я думаю, что вы ищете 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":
<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>
Отрицательное значение сдвинет его, и положительное значение dy сдвинет его. Я нашел, что использование -.4em кажется немного более сосредоточенным по вертикали для меня, чем -.5em, но вы будете судить об этом.
Посмотрев на Рекомендация SVG Я пришел к пониманию, что базовые свойства предназначены для размещения текста по сравнению с другим текстом, особенно при смешивании разных шрифтов и языков. Если вы хотите опубликовать текст так, чтобы он был сверху y, вам нужно использовать dy = "y + the height of your text".