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> 

我想以某种方式alignmentab的顶部。 其实,我希望我的定位是根据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"