вертикальное выравнивание текстового элемента в 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!

5 ответов


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

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

описание от w3c

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

консорциума W3C источник

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


согласно спецификации 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, dominant-baseline и alignment-baseline не поддерживаются.

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

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

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


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