SVG文本垂直对齐因上下文而异

Question

我有一个SVG对象（使用RaphaelJS生成），在插入一个HTML页面时可以正确显示。

在不同页面中使用相同代码创建相同SVG时，文本在垂直方向上显示不正确。

我已经检查了影响SVG的所有样式和属性以及包含该图的HTML，但我没有发现任何显着差异。另外，我认为SVG不应受父HTML元素的CSS规则的影响。

这是问题的图片。在左侧，正确呈现的图表。在右侧，文本显示不正确对齐（不居中）。这两个SVG对象出现在同一文档的不同iframe中（我已将它们放在一起作为图片）。

编辑：我注意到文本元素的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元素为目标。

您是否尝试使用诸如opera dragonfly，webkit inspector或mozilla firebug之类的调试工具来检查哪些样式应用于这些文本元素？

至少以下属性会影响文本基线：

• 显性基线
• 取向基线
• 基线漂移