SVG 文本垂直对齐方式因上下文而异答案

【问题标题】：SVG text vertical alignment differs depending on contextSVG 文本垂直对齐方式因上下文而异
【发布时间】：2011-12-02 10:57:55
【问题描述】：

我有一个 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>

有什么想法吗？

【问题讨论】：

请添加您的 Raphaël 代码。
请注意，svg 中没有 'font' 属性，它只是 CSS 简写。
不幸的是，Raphael 代码太复杂了，我没有时间准备一个孤立的复制案例：/。谢谢。
@ErikDahlström 这些样式属性是由 Raphael 添加的，但它们确实有效果（如果我删除样式属性，我可以看到字体系列发生变化，但看不到大小或位置）。
@jjmontes 是的，“样式”属性中允许使用“字体”，但不像您的第二个文本元素中那样，[... font="10px "Arial"" ...]。那应该完全没有影响。无论如何，您需要添加生成文本元素的脚本代码才能正确回答此问题。

标签： html svg raphael

【解决方案1】：

同一文档中的 SVG 元素（如果您使用 Raphaël 就是这种情况）确实会从其父级应用 CSS，以及该文档中使用的样式表中恰好针对 svg 元素的样式规则。

您是否尝试过使用诸如歌剧蜻蜓、webkit 检查器或 Mozilla firebug 之类的调试工具来检查哪些样式应用于这些文本元素？

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

显性基线
对齐基线
基线偏移

【讨论】：

我同时使用 webkit 检查器和 mozilla firebug。它们都显示了两个 SVG 对象的文本元素之间的“y”值（3.5 像素）的差异。
3,5像素的差异似乎是拉斐尔引入的。我最终手动更正了 Y 值（没有时间根据上下文找出引入这种差异的原因）。谢谢！