SVG中文本元素的垂直对齐 [英] vertical alignment of text element in 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！

I want to somehow align the top of a and b. Actually, I want my positioning to be according to the roofline instead of baseline!

推荐答案

alignment-baseline属性是您要查找的属性，可以采用以下值

The alignment-baseline property is what you're looking for it can take the following values

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

w3c的描述

此属性指定对象如何相对于其对齐 父母此属性指定此元素的基线 与父级的相应基线对齐.例如， 这样可以使罗马文本中的字母基线保持对齐 字体大小更改.默认为基线，名称与 对齐基线属性的计算值.那就是 表意"对齐点在 块进度方向是表意"的位置 对齐对象的基线表中的基线.

This property specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property. That is, the position of "ideographic" alignment-point in the block-progression-direction is the position of the "ideographic" baseline in the baseline-table of the object being aligned.

W3C源

不幸的是，尽管这是实现您所要实现的目标的正确"方法，但Firefox尚未为SVG文本模块(Firefox中的SVG" MDN文档)

Unfortunately, although this is the "correct" way of achieving what you're after it would appear Firefox have not implemented a lot of the presentation attributes for the SVG Text Module ('SVG in Firefox' MDN Documentation)

这篇关于SVG中文本元素的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！