Как получить 'dy' базовой линии в тексте svg?

Для текстовых элементов svg координаты применяются к левому нижнему углу базовой линии.

мой пример с текстом

У меня есть текст, ширина и высота которого известны, поэтому я могу установить row.height = 2 * text.height. Затем я хочу разместить 2 текстовых элемента в этой строке, один над другим, и я установил координату text.y равной coordinate of top left corner of row + text.heigh * 2. Чтобы установить нижнюю строку текста прямо над границей строки, но эта координата применяется к базовой линии, поэтому текст немного опускается. Вы можете увидеть это на картинке.

Итак, как узнать смещение базовой линии, чтобы установить координату текста, например

y = top left corner of row + height of text - baseline offset ?

Мой пример на Jsfiddle


text svg baseline
person Raf    schedule 20.02.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

На самом деле в SVG нет способа сделать это. Вы можете получить ограничительную рамку текстового элемента и даже ограничительную рамку отдельного символа. К сожалению, вы получаете ограничивающую рамку «em box» (синюю рамку на вашем снимке экрана), а не фактические границы глифа (ов).

person Paul LeBeau    schedule 21.02.2015

arrow_upward
1
arrow_downward

@ paul-lebeau ваш ответ с упоминанием о размере окна em дал мне идею, как рассчитать смещение базовой линии. У нас есть координата левого верхнего угла поля em, а также его высота и координата базовой линии текстового элемента. Так

embox.y + embox.heigh - text_baseline.y == baseline_offset

таким образом, мы можем установить координату текста как y = row.height - baseline_offset. http://jsfiddle.net/6r14wnsw/1/

И я нашел более простую квитанцию ​​http://jsfiddle.net/tpafwLmm/1/ установить текстовый атрибут dominant-baseline="text-after-edge" сместит базовую линию к нижнему краю вышивки, text-before-edge - к верхнему краю вышивки.

person Raf    schedule 21.02.2015