SVG 中文本元素的垂直对齐

假设我有 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>

我想以某种方式排列 a和 b的顶部。实际上，我希望我的定位是根据 roofline而不是 baseline！

127588 次浏览
小开
最佳答案

alignment-baseline属性是您正在寻找的，它可以采用以下值

auto | baseline | before-edge | text-before-edge |
middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical |
inherit

来自 w3c 的描述

此属性指定对象相对于其 此属性指定此元素的基线为 与父级的相应基线对齐。例如, 这使得罗马文本中的字母基线保持一致 字体大小改变。默认为基线，名称与 对齐基线属性的计算值 “表意文字”对齐点的位置 块级进方向是“表意文字”的位置 对齐的对象的基线表中的基线。

W3C 资源

不幸的是，尽管这是实现目标的“正确”方法，但似乎 Firefox 没有为 SVG 文本模块(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

有关每个可能值的更多信息，请检查 属性的 W3C推荐标准 主导-基线 。

小开

Attr (“主导-基线”，“中央”)

小开

在看了 SVG 建议之后，我了解到基线属性是用来定位文本相对于其他文本的位置，特别是在混合使用不同的字体和语言时。如果你想放置文本，使它的顶部是在 y那么你需要使用 dy = "y + the height of your text"。

小开

如果你在 IE 中测试这个，显性基线和对齐基线是不支持的。

在 IE 中居中显示文本最有效的方法是使用类似的“ dy”:

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

负值将使它向上移动，而正值 dy 将使它向下移动。我已经发现使用 -.4 em 对我来说比 -.5 em 显得更加垂直中心，但是你可以自己判断。


提交答案