svg alignment-baseline

[CEBEP]

Здравствуйте. занимаюсь освоением svg. Для позиционирования текста использую верхнюю грань, чтобы было удобно выровнять bounding box относительно других элементов. Чтобы выравнивание происходило по верхней грани текста я задаю тегу tspan параметр alignment-baseline со значением before-edge, после чего почему-то лишаюсь кросс-браузерности. На примере видно, что в хроме слово not опустилось вниз, сровняв свою верхнюю границу bounding box-а с базовой линией элемента text, в то время как в фаерфоксе мы видим аккуратную строку без каких-либо сдвигов. Как исправить ситуацию и добится того, чтобы во всех браузерах позиционирование текста происходило так же как в хроме? В соответствии со страничкой с cssportal.xom, tspan умеет использовать alignment-baseline. Как улучшить ситуацию ума не приложу...

В худшем случае (приведёт к перепилу), можно решить проблему ответив на более широкий вопрос: как спозиционировать текст так, чтобы границы, в которые он попадёт можно было знать с точностью до пикселя, при условии, что ширина и высота текста извесны.

 

P.S. помню, что тут в основном вопросы по css, связанные на прямую с html, но моя задача всё-таки реализуется в браузере и без использования языков программирования...

[SelenIT]

В описании tspan в том же MDN написано, что в Gecko (движке Фокса) некоторые презентационные атрибуты не работают. А alignment-baseline как раз относится к презентационным атрибутам.

Решение сходу на ум не приходит, надо еще подумать…

[CEBEP]

что ж, буду перепиливать всё без выпендрёжа, ровняя текст по старинке "на глазок". Если появятся идеи, пишите - обязательно вернёмся к этому вопросу.

[CEBEP]

пильнул фикс на js для этой ерунды... может кому пригодится... Использует d3...

    /*    Move text before edge line from it's base line. It should work as alignment-baseline: before-edge css property. But it's not work in canvg and gecko.     * @param text {Object} d3.selection of text    */    BEFORE_EDGE_FIX : function(text) {      var baseline = text.attr("y");      return text.attr("y", 2 * baseline - text.node().getBBox().y);    },