вертикальне вирівнювання текстового елемента у 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

Це властивість визначає, як об’єкт вирівнюється щодо його батьківського. Це властивість визначає, яку базову лінію цього елемента потрібно вирівняти з відповідною базовою лінією батьківського. Наприклад, це дозволяє алфавітним базовим рядкам у римському тексті залишатися вирівняними через зміни розміру шрифту. Він за замовчуванням застосовується до базової лінії з тим же найменуванням, що і обчислене значення властивості вирівнювання-базової лінії. Тобто, позиція "ідеографічної" точки вирівнювання в напрямку блок-прогресія - це положення "ідеографічної" базової лінії в таблиці базових ліній об'єкта, що вирівнюється.

Джерело W3C

На жаль, хоча це "правильний" спосіб досягти того, що ви перебуваєте після того, як виявиться, Firefox не реалізував багато атрибутів презентації для текстового модуля SVG ( "SVG у Firefox" MDN-документації )

— Саймон Вест
джерело

Не пощастило з цим. Чи можете ви навести приклад?

— SeMeKh

2

На мій погляд, найкраща відповідь, оскільки вона відповіла моїй, не переходячи до сторінки стіни тексту. Я хотів відобразити текст у y = 0, але це було поза екраном, тому я використовував правило CSS " базовий рядок: висить ", і він робив саме те, що я шукав, текст у найвищій точці контейнера SVG, при цьому жоден піксель не був на екрані.

— R. Hill

1

@SeMeKh: Хм, до речі, він працював на Chromium, але тепер я просто перевірив, що те саме не працює на Firefox. Тому, схоже, ця властивість не підтримується послідовно у веб-переглядачах.

— Р. Гілл

2

@ R.Hill Ось бугрепорт для firefox, який був відкритий понад 11 років тому bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: Яка різниця між "середнім" та "центральним"?

— 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 щодо властивості домінуючої базової лінії для отримання додаткової інформації про кожне можливе значення.

— тутанх
джерело

8

Це вирішило мої проблеми з Firefox (який не працював із властивістю "align-baseline"). "Домінантова база" працює на Chrome & Firefox. Дякую!

— Маріано Десанзе

5

За винятком того, що це не працює в жодній версії IE на даний момент, тому це, на жаль, не так корисно для багатьох реальних програм.

— Yona Appletree

3

Оскільки IE не підтримує ні домінантну, ні базову лінію вирівнювання, ви можете перевірити підтримку такої функції, як element.hasAttribute('dominant-baseline'), якщо вона повертається помилково, застосувати 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

Ядро відповіді правильне - встановіть атрибут домінант-базової лінії до центрального, проте attr () не є власною функцією JS і пояснення взагалі немає.

— jave.web

30

Якщо ви тестуєте це в IE, домінанти-базові лінії та базові лінії вирівнювання не підтримуються.

Найефективніший спосіб центрування тексту в IE - це використовувати щось подібне за допомогою "dy":

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

Від'ємне значення змістить його вгору, а позитивне значення dy змістить його вниз. Я виявив, що використання -.4em здається мені трохи більш орієнтованим по вертикалі, ніж -.5em, але ви будете судити про це.

— Whyoz
джерело

5

Дякуємо, що отримали єдину відповідь, яка працює в IE. Прикро, що ми повинні це зробити, але інші відповіді витратили мені багато часу на те, щоб все, що працює в Chrome / FF, потім виявило, що воно не працює в IE під час тестування браузера.

— Yona Appletree

Приємне і просте рішення! І нам слід пам’ятати, щоб видалити атрибут "align-baseline", щоб опустити його вплив на положення тексту в браузерах, які його підтримують.

— ЯТарас

7

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

— rjax
джерело

Вдячний за посилання на специфікацію, якесь дійсно корисне читання там. "<list-of-lengths>"Наприклад, не знали про (пов'язаний) варіант (дозволяє маніпулювати персонажем)

— brichins