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

Question

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

SeM*_*eKh 136 w3c svg vertical-alignment

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

Run Code Online (Sandbox Code Playgroud)

我想以某种方式对齐顶部a和b.实际上,我希望我的定位是根据roofline而不是baseline!

Answer 1

小智 213

根据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关于显性基线属性的建议.

这解决了我的Firefox问题(它没有使用"alignment-baseline"属性)."显性基线"适用于Chrome和Firefox.谢谢! (7认同)
除此之外,这在任何版本的IE中都不起作用,所以对于许多真实世界的应用程序来说,它实际上并没有那么有用. (4认同)
由于IE不支持显性基线或对齐基线,因此您可以检查对要素的支持,例如`element.hasAttribute('dominant-baseline')`,如果返回false则应用`dy = -0.4em `如本答案中所述http://stackoverflow.com/a/29089222/2296470 (3认同)
请注意，IE10-12 **和** Edge16 不支持 [dominant-baseline](https://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx) (2认同)

Answer 2

Sim*_*est 114

该alignment-baseline属性是您正在寻找它可以采取以下值

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

Run Code Online (Sandbox Code Playgroud)

来自w3c的描述

此属性指定对象相对于其父对象的方式.此属性指定此元素的哪个基线与父对应的基线对齐.例如,这允许罗马文本中的字母基线在字体大小更改之间保持对齐.它默认为基线,其名称与alignment-baseline属性的计算值相同.也就是说,块 - 进展 - 方向上的"表意"对齐点的位置是被对齐的对象的基线表中的"表意"基线的位置.

W3C来源

不幸的是,尽管这是实现你所追求的目标的"正确"方式,但Firefox似乎还没有为SVG文本模块实现很多表示属性('Firefox中的SVG'文档)

错误地投票,并且因为我之前犯过同样的错误,我无法撤消它.``alignment-baseline:central`确实_not_不适用于FireFox中的SVG,这似乎是设计的.`dominant-baseline:central`适用于我迄今为止尝试过的每个浏览器,如下所示:/sf/answers/1119825241/ (8认同)
在我看来,最好的答案,因为它回答我的,而不必导航到一个文本墙页面.我想在y = 0显示我的文本,但它是在屏幕外,所以我使用CSS规则"对齐 - 基线:悬挂",它完全符合我的要求,SVG容器中最高点的文本,没有一个像素在屏幕外. (2认同)
@R.Hill 这是 11 年前打开的 firefox 的错误报告 https://bugzilla.mozilla.org/show_bug.cgi?id=308338 顺便说一句：“中间”和“中央”之间有什么区别？ (2认同)

Answer 3

use*_*079 45

attr("显性基线","中心")

这与字符的中心对齐（就像字体字形很好地播放一样），不确定这是如何回答这个问题的。 (2认同)
这是分配属性的d3或jquery方法 (2认同)
答案的核心是正确的 - 将dominant-baseline属性设置为central，但是attr()不是原生JS函数，根本没有解释。 (2认同)

Answer 4

why*_*yoz 28

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

感谢您拥有在IE中有效的唯一答案.很遗憾我们必须这样做,但其他答案浪费了我很多时间让一切都在Chrome/FF中运行,然后发现它在浏览器测试期间无法在IE中运行. (5认同)

Answer 5

小智 7

在查看SVG建议书之后,我已经明白基线属性是为了相对于其他文本定位文本,特别是在混合使用不同的字体和/或语言时.如果你想要文本的位置,y那么你需要使用它的顶部dy = "y + the height of your text".

归档时间：	13 年，1 月前
查看次数：	93752 次
最近记录：	8 年，10 月前