カーブしたテキスト（パス上文字）を画像化せずにSVGのtextPathで描画する

今回作るもの

写真の上に、カーブしたテキストがのっているビジュアルを作成します。

デモ

パスのSVGデータの作り方

まずはFigmaでパス上文字風の配置を作る

今回は、楕円と長方形を交差（Intersect）した図形をオープンパスにして、Curve Text プラグインでパスの上に文字を描画します。

描画に使ったパスは、実装に使うのでレイヤーとして残しておきます。

Figmaから実装用のSVGコードを抜き出す

パス上文字を作るために使ったパスを、SVGとして書き出します。

その時、パス単体で書き出すと文字をのせたときに文字が切れてしまうので、文字を表示する高さを確保したフレームを作って書き出します。

※コードとして取得できれば良いので、筆者はSVG Exportプラグインで成形したパスをコピーします。

書き出し用のフレームの作り方

SVGコードの取得

今回取得したSVGコードは以下です。

<svg xmlns="http://www.w3.org/2000/svg" width="1442" height="361" fill="none" viewBox="0 0 1442 361">
  <path stroke="#000" d="M1.002 361a80.13 80.13 0 0 1-.002-.5C1 229.332 323.355 123 721 123c397.65 0 720 106.332 720 237.5v.5"/>
</svg>

SVGコードを利用してパス上文字を実装する

細かなレイアウトについてはデモをご覧ください。

デモ

完成品のコード

まずは完成品のコードです。

<svg xmlns="http://www.w3.org/2000/svg" width="1442" height="361" fill="none" viewBox="0 0 1442 361">
  <path id="path" d="M1.002 361a80.13 80.13 0 0 1-.002-.5C1 229.332 323.355 123 721 123c397.65 0 720 106.332 720 237.5v.5"/>
  <text>
    <textPath href="#path" startOffset="50%" text-anchor="middle">
      Happy Tea Time
    </textPath>
  </text>
</svg>

このコードについて解説します。

パス上文字の作り方と制御

① <path> にidを付与し <textPath から参照させる

まずはSVGコードのパス <path> にidを付与します。

そして、表示させるテキストを <text> と <textPath> 要素で囲んで <svg> 内に配置します。

<textPath> 要素のhref属性で、 <path> に付与したidを参照することで、文字がパスにそって表示されます。

② <textPath> に属性を付与して、テキストをパスの中央寄せにする

<textPath> に startOffset="50%" text-anchor="middle" を付与します。

これによって、テキストはパスの中央に表示されます。

③ <path> のstrokeを削除する

<path> のstrokeを削除すると、完成品のコードです。

Figmaと実装との差について

Figmaと実装との間には文字の位置に差異があります。

パスに対する文字の上下位置が異なる

実装では、パスの位置には文字のベースラインがきます。

いっぽうFigmaのCurve Text プラグインで作成した文字は、パスに対してやや上寄りに表示されます。

パスに対する文字の左右位置が異なる

実装では、パスの中央にテキストが来るように実装しています。

しかし、FigmaのCurve Text プラグインでは、文字の左右位置を目視で調整しているため、厳密には左右中央にありません。

表示の差に対する対策

以上のように、Figmaで作成したパス上文字と、SVGコードで作成したパス上文字とでは、完全には表示が一致しません。

そこで、今回のデモの「デザインに合わせて位置を微調整」バージョンでは <text> 要素の上下位置をCSSで調整して、見かけの位置をFigmaの表示に近づけています。

text{
    translate: 0 -15px;
}

まとめ

SVGの <textPath> を利用して、カーブしたテキスト（パス上文字）を作成する方法をご紹介しました。

複雑な形状のテキストであっても、テキストの入れ替えが発生する場面や、同じ形状を異なるテキストで繰り返し使う場合など、画像化したくないことがあります。

そんなときはこの記事でご紹介した、HTML内にインラインSVGとして書く方法を試してみてください。