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

SVGテキストのセンタリング問題。

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

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

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

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

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

SVGのセンタリングはHTMLのコードに気をつける。

1つ目の結論からすると、以下のコードで解決した。

SVGテキストの左右の中央揃えは、textタグに「x=”50%”」と「y=”50%”」、「text-anchor=”middle”」を指定すると機能する。

上下左右のセンタリングについては、svgタグをdivなどのタグ（今回の例では#box）で括って、CSSのFlexボックスを使って子要素にセンタリングの指定をしておけば良い。

HTML

例）

<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-->

CSS

例）

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

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

文字の色はCSSの「fill」と「stroke」で指定ができる。（PhotoshopやIllustrator、Figmaの「塗り」と「線」のように。）

overflow: hiddenで、左右が切れてしまうことがある。

また、リセットCSSなどで、svgタグの「overflow」プロパティの値を「hidden」にしている場合も、左右が切れてしまうことがある。

その場合はCSSにより、svgへ「overflow: visible;」を指定すると解決する。

（近年はidセレクタよりもclassセレクタを使うようにという話もあるが、本家本元のHTML文法的にはidセレクタで問題なく、読み込み速度にも実はほとんど変わりはない。）

CSS

例）

svg {
 overflow: visible;
}

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

svgタグの注意点。

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

HTML

例）

<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で指定した方が無難。

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

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

HTML

例）

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

CSS

例）

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

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

svg {
 overflow: visible;
}

<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のフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。