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

5 ответов:

The 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 Documentation)

98

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

174

attr ("dominant-baseline","central")

36

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

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

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

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

25

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

6