1

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

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

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

4

1 回答 1

2

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

一种可能的解决方案是使用类似于旧 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/

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

于 2013-10-09T13:22:26.973 回答