Question

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

Answer 1

根据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

检查the W3C recommendation for the dominant-baseline property以获取有关每个可能值的更多信息。

Answer 2

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

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

来自w3c的说明

此属性指定对象如何与其对齐家长。此属性指定此元素的基线与父母的相应基线对齐。例如，这允许罗马文本中的字母基线保持对齐字体大小更改。它默认为与基线同名的基线 alignment-baseline属性的计算值。那就是 “表意”对齐点的位置 block-progression-direction是“表意文字”的位置正在对齐的对象的基线表中的基线。

W3C Source

不幸的是，虽然这是实现你所追求的目标的“正确”方式，但Firefox似乎没有为SVG文本模块实现很多表示属性（'SVG in Firefox' MDN Documentation）

Answer 3

attr（“显性基线”，“中央”）

Answer 4

如果您在IE中对此进行测试，则不支持显性基线和对齐基线。

在IE中居中文本的最有效方法是使用“dy”这样的东西：

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

负值会将其向上移动，而dy的正值会将其向下移动。我发现使用-.4em似乎比-.5em更垂直于我，但你将是那个判断。

Answer 5

在查看SVG Recommendation后，我发现基线属性是为了相对于其他文本定位文本，特别是在混合使用不同的字体和/或语言时。如果您想要将文字设置为y，那么您需要使用dy = "y + the height of your text"。

SVG中文本元素的垂直对齐方式

5 个答案: