text-align =“middle”_only_在y方向？

我可以在文本元素上使用text-align =“middle”来居中文本.实际上这只适用于x方向.对于y方向,我使用问题 Aligning text in SVG中的Ian G的黑客.

但是,如果想要在y方向上居中文本,但想要在x方向上左对齐文本,我该怎么办？
例如,我有一个rect元素和一个位于其右侧的文本元素.文本应垂直对齐,以显示相对于rect的居中.因此我使用text-align =“middle”属性.但是我想在x方向上左对齐文本(因为我想在rect的右边显示它).这不起作用,因为text-align始终应用x,y两个值.

实际上我对这种垂直对齐并不是很满意,而是更喜欢别的东西.但是还没有找到更好的解决方案. (我不能使用显性基线属性,因为我使用的是Batik,它不支持它.)我甚至无法自己计算,因为在SVG中我无法查询上升/下降/基线一种字体

解决方法

正如您所发现的那样,基线相关属性尚未得到普遍支持(尚未).

一种可能的解决方案是使用类似于旧CSS技巧的方法进行垂直居中.

将文本的y坐标设置为要居中的对象的垂直中心.然后使用带有em值的dy来正确调整文本.

<text x="0" y="100" font-family="Verdana" font-size="20pt" dy="0.35em">Some TEXT</text>

你可能认为dy的数量不会是0.5em,因为字体的视觉中心不会是em高度的一半.它会因字体而异.但是一旦你找到一个特定字体的良好dy值,它应该适用于任何字体大小.

在这里演示：http://jsfiddle.net/js88W/1/

尝试更改字体大小值以确认它保持居中.