[解決済み] SVG における text 要素の垂直アライメント

質問

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 !

どのように解決するのですか？

この alignment-baseline プロパティは、次の値を取ることができます。

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

w3cからの説明

このプロパティは、オブジェクトがその親に対してどのように整列されるかを指定します。 親要素に対してどのように整列させるかを指定します。このプロパティは、この要素のどのベースラインが親の対応するベースラインと揃えられるかを指定します。 このプロパティは、この要素のどのベースラインが親の対応するベースラインと整列されるかを指定します。例えば これにより、ローマ字テキストのアルファベットのベースラインは、フォントサイズが変わっても整列したまま のベースラインを維持することができる。と同じ名前のベースラインがデフォルトとなります。 と同じ名前のベースラインがデフォルトです。つまり の位置は、ブロック-プログレッション-方向における ブロック進行方向における"ideographic" alignment-pointの位置は，"ideographic" baseline-tableの位置である。

W3Cソース

残念ながら、これは正しい方法ですが、Firefox は SVG Text Module のプレゼンテーション属性の多くを実装していないように見えます ( Firefox における SVG」MDN ドキュメント )