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

Скажем, у меня есть файл 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!

Ответы

Ответ 1

Свойство 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 - позиция "идеографического" базовая линия в базовой таблице выравниваемого объекта.

Источник W3C

К сожалению, хотя это "правильный" способ достижения того, что вы после него, Firefox не реализовал множество атрибутов презентации для текстового модуля SVG (' SVG в документации "MDN Firefox" )

Ответ 2

Согласно спецификации 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 для свойства доминантно-базового для получения дополнительной информации о каждом возможном значении.

Ответ 3

attr ( "доминирующая-базовая линия", "центральная" )

Ответ 4

Если вы тестируете это в IE, базовая линия и базовая линия выравнивания не поддерживаются.

Самый эффективный способ центрировать текст в IE - использовать что-то вроде этого с помощью "dy":

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

Отрицательное значение сдвинет его, и положительное значение dy сдвинет его. Я нашел, что использование -.4em кажется немного более сосредоточенным по вертикали для меня, чем -.5em, но вы будете судить об этом.

Ответ 5

Посмотрев на Рекомендация SVG Я пришел к пониманию, что базовые свойства предназначены для размещения текста по сравнению с другим текстом, особенно при смешивании разных шрифтов и языков. Если вы хотите опубликовать текст так, чтобы он был сверху y, вам нужно использовать dy = "y + the height of your text".