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

142

Допустим, у меня есть файл 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!

svg vertical-alignment w3c SeMeKh
источник
Единственный ответ, который работает в IE: stackoverflow.com/a/29089222/9069356
Dominus.Vobiscum

Ответы:

116

alignment-baselineСвойство это то , что вы ищете может принимать следующие значения

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

Описание от w3c

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

W3C Source

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

Саймон Вест
источник
Не повезло с этим. Не могли бы вы привести пример?
СЕМЕХ
2
На мой взгляд, лучший ответ, так как он отвечал на мой, без необходимости переходить на страницу со стеной текста. Я хотел отобразить свой текст при y = 0, но это было за пределами экрана, поэтому я использовал правило CSS "alignment- baseline: висит ", и он сделал именно то, что я искал, текст в самой высокой точке в контейнере SVG, без единого пикселя за кадром.
Р. Хилл
1
@ SeMeKh: Хм, кстати, у меня это работало на Chromium, но теперь я только что убедился, что то же самое не работает на Firefox. Таким образом, кажется, что это свойство не поддерживается согласованно во всех браузерах на данный момент.
Р. Хилл
2
@ R.Hill Вот отчет об ошибке для Firefox, который был открыт более 11 лет назад bugzilla.mozilla.org/show_bug.cgi?id=308338 Кстати: в чем разница между «средним» и «центральным»?
mxmlnkn
9
Проголосовал по ошибке, и, поскольку я уже совершал ту же ошибку, я не могу отменить ее. ☹ alignment-baseline: centralделает не работа для SVGs в FireFox, и что , как представляется, в соответствии с проектом. dominant-baseline: centralработает в каждом браузере, который я пробовал до сих пор, как указано в этом ответе: stackoverflow.com/a/15997503/1450294
Майкл Шепер
227

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

toutankh
источник
8
Это исправило мои проблемы с Firefox (который не работал со свойством alignment-baseline). «Доминирующая базовая линия» работает на Chrome и Firefox. Спасибо!
Мариано Дезанце
5
За исключением того, что на данный момент это не работает ни в одной версии IE, поэтому, к сожалению, это не так уж полезно для многих реальных приложений.
Йона Апплетри
3
Так как IE не поддерживает ни dominant-baseline, ни alignment-baseline, вы можете проверить поддержку этой функции, например element.hasAttribute('dominant-baseline'), и если она возвращает false, примените, dy=-0.4emкак описано в этом ответе stackoverflow.com/a/29089222/2296470
Tigran
1
Доминантно-базовый: центральный работал в моем случае. Спасибо!
Лиам Митчелл
1
имейте в виду, что доминантный базовый уровень не поддерживается IE10-12 и Edge16
japrescott
47

attr ("доминантно-базовый", "центральный")

user1087079
источник
1
Это выравнивается по центру символа (насколько хорошо играют глифы шрифта), не уверен, как это ответ здесь на этот вопрос.
matanster
3
Это метод присвоения атрибутов в d3 или jquery
глиф,
1
Это решение помещает базовую линию в вертикальный центр текста. Таким образом, координата Y находится в вертикальном центре. Это был ответ, который я искал. Спасибо.
Генри
1
Суть ответа верна - установите для атрибута dominant-baseline значение central, однако attr () не является нативной функцией JS, и никакого объяснения нет.
jave.web
30

Если вы тестируете это в IE, dominant-baseline и alignment-baseline не поддерживаются.

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

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

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

whyoz
источник
5
Спасибо за единственный ответ, который работает в IE. Обидно, что мы должны это сделать, но другие ответы потратили у меня много времени на то, чтобы все работало в Chrome / FF, а затем я обнаружил, что это не работает в IE во время тестирования браузера.
Йона Апплетри
Хорошее и простое решение! И мы должны не забыть удалить атрибут «alignment-baseline», чтобы исключить его влияние на положение текста в браузерах, которые его поддерживают.
YaTaras
7

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

rjax
источник
Цените ссылку на спецификации, некоторые действительно полезные чтения там. "<list-of-lengths>"Например, не знал о параметре (связанный) (позволяет манипулировать персонажем)
brichins