在SVG文本元素的垂直取向(vertical alignment of text element i

比方说，我有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 ！

Answer 1:

该alignment-baseline属性是你在找什么可以采取以下值

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

W3C的说明

该属性指定的对象是如何相对于其父排列。此属性指定该元素的基线是与父的相应的基线对齐。例如，这允许在罗马字母文字基线来保持整个字体大小的变化一致。缺省为具有相同名称作为取向基线属性的计算值的基线。也就是说，在数据块进展方向“表意”对准点的位置是在所述对象的基线表中的“表意”基线被对准的位置。

W3C来源

不幸的是，虽然这是实现你以后它会出现的Firefox还没有实现对SVG的文本模块（很多演示文稿的属性的“正确”的方式“SVG在Firefox” MDN文档）

Answer 2:

根据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建议约每一个可能的值的详细信息。

Answer 3:

ATTR（“显性基线”，“中央”）

Answer 4:

如果你在IE中测试这个，占主导地位的基线和对齐基线不被支持。

在IE中居中文本的最有效的方法是使用像这样以“DY”：

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

负值将转向它和Dy的正值将转移下来。我发现使用-.4em似乎有点超过-.5em垂直居中我，但你会的法官。

Answer 5:

看后， SVG建议我来的理解是，基线性质是为了相对文本位置和其他文本，混合不同的字体和语言或尤其是当。如果你想现在的位置是文本，以便它的顶部是在y那么你需要使用dy = "y + the height of your text" 。

文章来源: vertical alignment of text element in SVG