SVGテキストをセンタリングする方法。Safariの挙動も解決。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

SVGテキストをセンタリングする方法。Safariの挙動を解決。

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

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

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

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

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

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

SVGテキストをセンタリングする方法。Safariの挙動を解決。

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

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

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

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

例)

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

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

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

CSS

例)

#box {
 display: flex;
 justify-content: center;
 align-items: center;
}
Hello, how are you?

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


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-->
Hello, how are you?

上記の例の場合、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;
}
Hello, how are you?


テキストの縁取り。

fillの値をtransparent(透明)にすると、縁取りのテキストができる。

例)

<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;
}
Hello, how are you?

SVGテキストをセンタリングする方法。Safariの挙動を解決。

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


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

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。