假设我有 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我想以某种方式对齐and的顶部b。实际上，我希望我的定位是根据roofline而不是baseline！
根据 SVG 规范，仅alignment-baseline适用于<tspan>、<textPath>和. 我的理解是，它是用来抵消它们上面的物体的。我认为您正在寻找的是.<tref><altGlyph><text>dominant-baseline
的可能值为 dominant-baseline：
auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit
有关每个可能值的更多信息，请查看W3C 对主要基线属性的建议。
该alignment-baseline属性是您正在寻找的它可以采用以下值
auto | baseline | before-edge | text-before-edge |
middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical |
inherit
来自 w3c 的描述
此属性指定对象如何与其父对象对齐。此属性指定此元素的哪个基线与父元素的相应基线对齐。例如，这允许罗马文本中的字母基线在字体大小更改时保持对齐。它默认为与对齐基线属性的计算值同名的基线。也就是说，“表意”对齐点在块行进方向上的位置是“表意”基线在被对齐对象的基线表中的位置。
不幸的是，虽然这是实现你想要的结果的“正确”方式，但 Firefox 并没有为 SVG 文本模块实现很多表示属性（'SVG in Firefox' MDN Documentation）
attr("主要基线", "中央")
如果您在 IE 中对此进行测试，则不支持dominant-baseline 和alignment-baseline。
在 IE 中使文本居中的最有效方法是在“dy”中使用类似这样的内容：
<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>
负值将其向上移动，dy 的正值将其向下移动。我发现使用 -.4em 对我来说似乎比 -.5em 更垂直居中，但你会对此做出判断。
在查看了SVG Recommendation之后，我了解到基线属性旨在相对于其他文本定位文本，尤其是在混合不同字体和/或语言时。如果您想发布文本以使其位于顶部，y那么您需要使用dy = "y + the height of your text".