假设我有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！
Answers:
该alignment-baseline属性是您要查找的属性，可以采用以下值
auto | baseline | before-edge | text-before-edge |
middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical |
inheritw3c的描述
此属性指定对象如何相对于其父对象对齐。此属性指定该元素的哪个基线要与父元素的相应基线对齐。例如，这允许罗马文本中的字母基线在字体大小变化时保持对齐。它默认为基线，其名称与alignment-baseline属性的计算值相同。也就是说，“表意”对准点在块前进方向上的位置是“表意”基线在被对准对象的基线表中的位置。
不幸的是，尽管这是实现您所要实现的目标的“正确”方法，但Firefox尚未为SVG文本模块（“ Firefox中的SVG” MDN文档）实现了很多演示属性。
alignment-baseline: central确实没有在Firefox SVGs工作，这似乎是由设计。dominant-baseline: central可以在到目前为止我尝试过的每种浏览器中工作，如此答案所示：stackoverflow.com/a/15997503/1450294
根据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建议中的优势基线属性，以获取有关每个可能值的更多信息。
element.hasAttribute('dominant-baseline')，如果它返回false dy=-0.4em，则按此答案中的说明套用stackoverflow.com/a/29089222/2296470
如果要在IE中进行测试，则不支持优势基准和对齐基准。
在IE中将文本居中的最有效方法是在“ dy”中使用以下内容：
<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>负值会将其上移，而dy的正值将使其下移。我发现使用-.4em垂直于我比-.5em居中一点，但是您将对此做出判断。