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

我有一个SVG对象（用RaphaelJS生成），当插入到一个HTML页面时，它显示正确。SVG文本垂直对齐因上下文而异

在不同的页面中使用相同的代码创建相同的SVG时，文本显示错误地垂直对齐。

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

这是一个问题的图片。在左边，正确渲染的图。在右侧，文本显示错误地对齐（不居中）。这两个SVG对象出现在同一文档的不同iframe中（我将它们放在一起用于图片）。

SVG text alignment issues

编辑：我注意到，在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>

任何想法？

来源

2011-12-02 jjmontes

请添加您的拉斐尔代码。 – robertc

请注意，svg中没有'font'属性，它只是一个CSS速记。 –

不幸的是，拉斐尔代码太复杂了，我没有时间准备一个单独的复制案例：/。谢谢。 – jjmontes

同一文档中的SVG元素（如果您使用Raphaël，就是这种情况）确实从其父母申请了CSS，以及从该文档中使用的样式表中的stylerules碰巧定位到svg元素。

您是否尝试过使用opera蜻蜓，webkit inspector或mozilla firebug等调试工具来检查哪些样式应用于这些文本元素？

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

主导基线
对准基线
基线漂移

来源

2011-12-02 11:46:00

我使用webkit督察和mozilla萤火虫。它们都显示了两个SVG对象的文本元素之间的“y”值（3.5 px）的差异。 – jjmontes

这个3,5像素差异似乎是由拉斐尔介绍的。我最终手动更正了Y值（没有时间根据上下文找出引入差异的原因）。谢谢！ – jjmontes

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

回答

相关问题