text-align = "средний" _only_ в y-направлении?

Question

Я могу использовать text-align="middle" на текстовом элементе в центре текста. На самом деле это работает только для x-направления. Для y-направления я использую взломанный Ian G под вопросом Aligning text in SVG.

Но что мне делать, если хотите центрировать текст в направлении y, но хотите выровнять по левому краю текст в x-направлении? Например, у меня есть rect -элемент и text -элемент, расположенный справа от него. Текст должен быть выровнен по вертикали, чтобы центрироваться по отношению к прямоугольнику. Поэтому я использую свойство text-align="middle". Но я хочу выровнять текст по оси x (так как я хочу отобразить его справа от прямоугольника). Это не работает, поскольку text-align всегда применяет оба значения: x и y.

На самом деле я не очень доволен вертикальным выравниванием таким образом и предпочел бы что-то другое. Но пока не нашел лучшего решения. (Я не могу использовать атрибут dominant-baseline, так как я использую Batik, который его не поддерживает.) Я даже не могу его вычислить сам, поскольку в SVG у меня нет возможности запросить восхождение/спуск/базовую линию шрифт.

Answer 1

Связанные с атрибутами атрибуты, как вы обнаружили, не поддерживаются повсеместно (пока).

Одним из возможных решений является использование метода, аналогичного старому трюку CSS для вертикального центрирования.

Установите координату y в вертикальном центре объекта, на котором вы хотите сосредоточиться. Затем используйте dy со значением em для правильной настройки текста.

<text x="0" y="100" font-family="Verdana" font-size="20pt" dy="0.35em">Some TEXT</text> 

Количество dy не будет 0.5em, как вы могли бы подумать, потому что визуальный центр шрифта не будет ровно половина высоты эм. Это зависит от шрифта и шрифта. Но как только вы найдете хорошее значение dy для определенного шрифта, оно должно работать на любой размер шрифта.

Демо здесь: http://jsfiddle.net/js88W/1/

Попробуйте изменить значение размера шрифта, чтобы подтвердить, что остается в центре.