Вертикальное выравнивание текста SVG отличается в зависимости от контекста

Question

У меня есть объект SVG (сгенерированный с помощью RaphaelJS), который отображается правильно при вставке в одну HTML-страницу.

При создании того же SVG-файла с использованием того же кода на другой странице текст отображается неправильно выровненным по вертикали.

Я проверил все стили и атрибуты, влияющие на SVG, и HTML-код, содержащий диаграмму, но я не нашел какой-либо существенной разницы.Кроме того, я подумал, что на SVG не должны влиять правила CSS родительских элементов HTML.

Вот изображение проблемы.Слева - правильно составленная диаграмма.Справа текст выглядит неправильно выровненным (не по центру).Эти два объекта SVG появляются в разных фреймах одного и того же документа (я собрал их вместе для рисунка).

Редактировать: я заметил, что координаты Y текстовых элементовдействительно разные:

<!-- Incorrect -->
<text x="362" y="71" text-anchor="end" style="font: normal normal normal 10px/normal Arial; text-anchor: end; " stroke="none" fill="#000000"><tspan>MQ</tspan></text> 
<!-- Correct -->
<text x="362" y="74.5" text-anchor="end" style="font: normal normal normal 10px/normal Arial; text-anchor: end; " font="10px &quot;Arial&quot;" stroke="none" fill="#000000"><tspan>MQ</tspan></text>

Есть идеи?

Answer 1

Элементы SVG в том же документе (что имеет место, если вы используете Raphaël) действительно применяют CSS от своих родителей, а также правила стилей из таблиц стилей, используемых в этом документе, которые предназначаются для элементов SVG.

Вы пытались использовать инструмент отладки, такой как опера-стрекоза, инспектор webkit или mozilla firebug, чтобы проверить, какие стили применяются к этим текстовым элементам?

Как минимум следующие свойства будут влиять на базовый текст:

• Доминантно-базовый
• выравнивания базовой линии
• базовый сдвиг