SVGテキストのセンタリングは、ブラウザによって挙動が違う。

SVGでのアイコンやテキスト表示は簡単だが、位置やアニメーションの設定をしていると、思わぬところで落とし穴にハマることがある。

表示位置やアニメーションはCSSの方で指定できるが、SVGテキストの場合、何故かSafariでだけうまくいかない場合があった。

実際に検証したところ、CSSの問題ではなく、HTML側での問題だった。

• 「text-align: center;」
• 「margin: auto;」

ただ水平方向にセンタリングしたいだけなのに、上記のCSS指定は効果がなかった。

<div id="box">
 <svg xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%" text-anchor="middle">Hello, how are you?</text>
 </svg>
</div><!--box-->

text {
 font-size: 3rem;
 stroke: #240401;
 fill: #240401;
}

#box {
 display: flex;
 justify-content: center;
 align-items: center;
}

HTML側のタグに「viewBox」などのインライン指定をしているときのアニメーションなどは要注意。

ただし、svgタグに「viewBox」属性の指定をしたり、textタグに「stroke-width」属性などの指定をしてCSSアニメーションや位置の設定をしたりすると、Safariと他のブラウザでの表示が異なることがある。

例）

<div id="box">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100">
  <text x="50%" y="50%" text-anchor="middle" stroke-width="1">Hello, how are you?</text>
 </svg>
</div><!--box-->

上記の例の場合、Safariでの表示が異なる。（文字サイズが極端に小さい。）

パソコンのブラウザでSafariを使っている人は少ないだろうが、iPhoneでは多くのシェアを獲得しているのでターゲットブラウザから外すことはできない。

この場合は「viewBox」の値が原因だが、ChromeやAndroidでは少し小さい程度だったので気づきにくく、まだSVGの情報や経験も少ないので原因がわかるのが遅くなった。

HTMLのインライン指定ではなく、CSSで指定した方が良いかもしれない。

SVGテキストの場合、文字のサイズと太さ、中央揃えはCSS側の「font-size」と「stroke-width」、「text-anchor」で指定ができ、全体の位置もCSSでできる。

なので最終的な結論としては、HTML側で「viewBox」属性や「stroke-width」属性、text-anchor属性の指定はせず、CSS側で指定した方がスムーズかつ無難かもしれない。

例）

<div id="box">
 <svg xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%">Hello, how are you?</text>
 </svg>
</div><!--box-->

例）

#box {
 display: flex;
 justify-content: center;
 align-items: center;
}

text {
 font-size: 3rem;
 stroke: #240401;
 fill: #240401;
 text-anchor: middle;
}

<div id="box">
 <svg xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%">Hello, how are you?</text>
 </svg>
</div><!--box-->

#box {
 display: flex;
 justify-content: center;
 align-items: center;
}

text {
 font-size: 3rem;
 stroke: #240401;
 stroke-width: 0.5px;
 fill: transparent;
 text-anchor: middle;
}

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。