SVG中文本元素的垂直对齐

svg vertical-alignment w3c

假设我有 SVG 文件：

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

我想以某种方式对齐 a 和 b 的顶部。实际上，我希望我的定位是根据 roofline 而不是 baseline！

在 IE 中有效的唯一答案：stackoverflow.com/a/29089222/9069356

Mariano Desanze

根据 SVG 规范，alignment-baseline 仅适用于 <tspan>、<textPath>、<tref> 和 <altGlyph>。我的理解是它是用来抵消它们上方的 <text> 对象的。我认为您正在寻找的是 dominant-baseline。

dominant-baseline 的可能值为：

汽车 |使用脚本 |不变|重置大小 |表意|字母 |挂|数学 |中央|中间 |边缘后文字 |边缘前的文字 |继承

检查 the W3C recommendation for the dominant-baseline property 以了解有关每个可能值的更多信息。

这解决了我使用 Firefox 的问题（它不适用于“alignment-baseline”属性）。 “主导基线”适用于 Chrome 和 Firefox。谢谢！

除了此时这在任何版本的 IE 中都不起作用，因此不幸的是，它对于许多实际应用程序来说并没有那么有用。

由于 IE 不支持显性基线或对齐基线，您可以检查对功能的支持，如 element.hasAttribute('dominant-baseline')，如果它返回 false，则应用 dy=-0.4em，如本答案 stackoverflow.com/a/29089222/2296470 中所述

主导基线：中央在我的情况下工作。谢谢！

请注意，IE10-12 和 Edge16 不支持 dominant-baseline

Michael Currie

alignment-baseline 属性是您要查找的内容，它可以采用以下值

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

来自 w3c 的描述

此属性指定对象如何与其父对象对齐。此属性指定此元素的哪个基线与父元素的相应基线对齐。例如，这允许罗马文本中的字母基线在字体大小更改时保持对齐。它默认为与对齐基线属性的计算值同名的基线。也就是说，“表意”对齐点在块行进方向上的位置是“表意”基线在被对齐对象的基线表中的位置。

W3C Source

不幸的是，尽管这是实现您想要的结果的“正确”方式，但 Firefox 并没有为 SVG 文本模块 ('SVG in Firefox' MDN Documentation) 实现很多表示属性

没有运气。你能举个例子吗？

在我看来，这是最好的答案，因为它回答了我的问题，而无需导航到文本墙页面。我想在 y = 0 处显示我的文本，但它不在屏幕上，所以我使用了 CSS 规则“对齐 -基线：悬挂”，它完全符合我的要求，SVG容器中最高点的文本，没有一个像素在屏幕外。

@SeMeKh：嗯，顺便说一句，它在 Chromium 上对我有用，但现在我刚刚验证了同样的方法在 Firefox 上不起作用。所以目前看来，这个属性在浏览器中并没有得到一致的支持。

@R.Hill 这是 11 年前打开的 Firefox 错误报告bugzilla.mozilla.org/show_bug.cgi?id=308338顺便说一句：“中间”和“中央”有什么区别？

错误地投了赞成票，因为我以前犯过同样的错误，所以我无法撤消它。 ☹ alignment-baseline: central not 对 FireFox 中的 SVG 起作用，这似乎是设计使然。 dominant-baseline: central 适用于我迄今为止尝试过的所有浏览器，如以下答案所示：stackoverflow.com/a/15997503/1450294

user1087079

attr("主要基线", "中央")

这与字符的中心对齐（就像字体字形很好地播放一样），不确定这是如何回答这个问题的。

这是分配属性的 d3 或 jquery 方法

此解决方案将基线放在文本的垂直中心。所以y坐标在垂直中心。这就是我一直在寻找的答案。谢谢。

答案的核心是正确的 - 将占主导地位的基线属性设置为中心，但是 attr() 不是原生 JS 函数，根本没有解释。

问题是要求“屋顶式”对齐，而不是“中央”对齐。我假设实际回答原始问题的正确 dominant-baseline 值是 hanging。

whyoz

如果您在 IE 中对此进行测试，则不支持dominant-baseline 和alignment-baseline。

在 IE 中使文本居中的最有效方法是在“dy”中使用类似这样的内容：

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

负值将其向上移动，dy 的正值将其向下移动。我发现使用 -.4em 对我来说似乎比 -.5em 更垂直居中，但你会对此做出判断。

感谢您提供适用于 IE 的唯一答案。很遗憾我们必须这样做，但其他答案浪费了我大量时间让所有东西都在 Chrome/FF 中运行，然后在浏览器测试期间发现它在 IE 中不起作用。

好而简单的决定！我们应该记住删除“alignment-baseline”属性以忽略它对支持它的浏览器中文本位置的影响。

brichins

查看 SVG Recommendation 后，我了解到基线属性旨在相对于其他文本定位文本，尤其是在混合不同字体和/或语言时。如果您想发布文本以使其顶部位于 y，那么您需要使用 dy = "y + the height of your text"。

欣赏规范的链接，那里有一些非常有用的阅读材料。例如，不知道（链接的）"<list-of-lengths>" 选项（允许按字符操作）

SVG中文本元素的垂直对齐

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们