SVGのtextをスマホブラウザで表示させた時にbaselineがズレる問題の対処

PCの複数ブラウザでは表示がズレないのに、スマホの複数ブラウザではSVGのtextのbaselineがずれる問題に少し悩み、対処ができたのでメモを残します。

  <text x="10" y="10">
    <tspan>some text</tspan>
  </text>
  <text x="100" y="10">
    another text
    <tspan>somemore text</tspan>
  </text>

  <style>
    text {
      dominant-baseline: alphabetic;
      alignment-baseline: baseline;
      text-anchor: end;
    }
  </style>

上記のような感じのSVGを書いていたところ(実際のコードはtspanにfont-sizeなどを指定しているなどもっと複雑)、
some textとsomemore textは上下の位置が同じになるのに、
another textが同じにならない、という症状にちょっと悩まされました。

また、PCの各種ブラウザでは問題なく表示されているので、スマホでの表示崩れに対処することが遅れました。

解決策は、

  <tspan>another text</tspan>

といった感じで、 tspan が不要（と思っていた）部分も、tspanタグで括ってやるだけでした。

スマホの各種ブラウザ(iOSのFirefoxやChromeなど)は、tspanのあるなしで、
alignment-baselineかdominant-baselineが適用されるされないという感じで、解釈がPCと違うようでした。
（詳細はそこまで詰められていません..）

SVGのスマホブラウザにおけるbaselineのズレの問題は、結構ニッチな話かもしれませんが、
同じような問題に悩む方にはちょっと役立つかと思いメモを残します。

ブラウザのバージョンなどでも違いがあるかもしれませんが、そこまで今は調べて記載しません。悪しからず。

ではでは。