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

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有关每个可能值的更多信息。