text-align="middle" _only_ 在 y 方向？答案

【问题标题】：text-align="middle" _only_ in y-direction?text-align="middle" _only_ 在 y 方向？
【发布时间】：2013-10-15 17:36:54
【问题描述】：

我可以在文本元素上使用text-align="middle" 使文本居中。实际上，这只适用于 x 方向。对于 y 方向，我使用了 Ian G 的 hack Aligning text in SVG。

但是，如果想要将文本在 y 方向居中，但又想在 x 方向左对齐，我该怎么办？例如，我有一个 rect-element 和一个位于其右侧的 text-element。文本应垂直对齐以相对于矩形显示居中。因此我使用text-align="middle" 属性。但我想在 x 方向左对齐文本（因为我想将它显示在 rect 的右侧）。这不起作用，因为text-align 总是同时应用x 和y 值。

实际上，我对这种垂直对齐方式并不满意，我更喜欢其他方式。但是还没有找到更好的解决方案。（我不能使用 dominant-baseline 属性，因为我使用的是不支持它的 Batik。）我什至无法自己计算它，因为在 SVG 中我无法查询上升/下降/基线一种字体。

【问题讨论】：

标签： text svg alignment text-alignment

【解决方案1】：

正如您所发现的，与baseline 相关的属性尚未得到普遍支持（目前）。

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

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

<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/

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

【讨论】：