SVG中文本元素的垂直alignment
假设我有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> 我想以某种方式alignmenta和b的顶部。 其实，我希望我的定位是根据roofline而不是baseline ！
alignment-baseline属性就是您要查找的属性，可以采用以下值
auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit
来自w3c的描述
此属性指定对象如何与其父alignment。 此属性指定此元素的哪个基线将与父级的相应基线alignment。 例如，这允许在罗马文字中的字母基线在字体大小变化上保持alignment。 它缺省为与alignment-baseline属性的计算值同名的基线。 也就是说，“表意”alignment点在块进程方向上的位置是alignment的对象的基线表中的“表意”基线的位置。
W3C来源
不幸的是，虽然这是“正确”的方式来实现你所看到的后果，但Firefox并没有为SVG文本模块实现很多的performance属性（ “Firefox中的SVG”MDN文档 ）
根据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
查看关于主导基线属性的W3Cbuild议，以获取有关每个可能值的更多信息。
attr（“主导 – 基线”，“中央”）
如果您在IE中testing，则不支持显性 – 基线和alignment – 基线。
在IE中居中文本的最有效的方法是用“dy”这样的东西：
<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>
负值将会使其上移，而dy的正值会使其下移。 我发现使用-.4em似乎比-5.5更垂直居中，但是你会是这个判断的。
看过SVGbuild议之后，我发现基本属性是用来相对于其他文本来定位文本的，特别是在混合不同的字体和/或语言的时候。 如果你想让文本位于顶部，那么你需要使用dy = "y + the height of your text" 。
