【SVG】文字が思ったところに表示されない

svg

文字が思ったところに表示されなくてハマったのでメモ。
まずはこのコードをご覧ください。

<svg viewBox="0 0 50 50">
  <text x="0" y="0">あ</text>
</svg>

x, yがゼロなので
左上あたりに「あ」て表示されると思うじゃないですかーー。
でも実際は... あ

↑ わかる？
上にちょこっとだけ黒いのが見えるの。
これ「あ」の最後の"払い"の部分です。
つまりキャンバス領域よりも上に「あ」が表示されてる。
なんでや！w

原因はdominant-baselineのデフォルトがideographicだから

文字のy方向の基準位置を決めるプロパティにdominant-baselineがあり
このデフォルトがideographicになってることが原因みたい。 詳しくはココの「テキストの整列」に載ってる。

text-before-edgeを設定すればOK

想定通りの表示をするにはdominant-baselineにtext-before-edgeを指定すればいい。

<svg viewBox="0 0 50 50">
  <text x="0" y="0" dominant-baseline="text-before-edge">あ</text>
</svg>

あ

でたーーーー！

つらい

この現象、x, yが両方ゼロだから気づけるけど

x="472" y="836.1"

とかだと「なーーーんかy方向にずれるなぁ」くらいで全然気づけないっす。
なんだかなー。