вертикальное выравнивание текстового элемента в 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-таблица выравниваемого объекта.
к сожалению, хотя это "правильный" способ достижения того, что вы после этого, казалось бы, 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 для доминант-базовый уровень свойства для получения дополнительной информации о каждой возможной значение.
Если вы тестируете это в 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"
.