ホームページ制作,WEB戦略,効果UP,岡山のニッティグリッティ

お役立ち

ニッティ・グリッティの

お役立ち情報

テキストを曲面に沿って配置する方法

UPDATE : 2021.9.8

投稿者 : ニッティ・グリッティ

コーディング

文字を曲面に沿って配置する方法ですが、こんな記事がありました。

なるほどなぁと思いましたので、例によってゆっくり読んでいきます

Curved Text Along Path

https://css-tricks.com/snippets/svg/curved-text-along-path/

「手順1」

まず、SVGで半円を作成します。idはcurveです

HTML

<svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
</svg>

「手順2」

このpathに沿って、<text>タグで囲います。

HTML

<svg viewBox="0 0 500 500">
   <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
   <text width="500">Dangerous Curves Ahead</text>
</svg>

このときにはまだtextは表示されていません。

「手順3」

text pathタグでくくり、リンク先をpathのidにします

HTML

<svg viewBox="0 0 500 500">
   <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
   <text width="500">
      <textPath xlink:href="#curve">
         Dangerous Curves Ahead
      </textPath>
   </text>
</svg>

「手順4」

そして、pathに　fill=”transparent”を設定することで作成した半円を透明化します。

HTML

<svg viewBox="0 0 500 500">
<path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
   <text width="500">
      <textPath xlink:href="#curve">
      Dangerous Curves Ahead
      </textPath>
   </text>
</svg>

そうすると円に沿って文字列が配置されました！

「手順5」

この半円のpathを変え、形状を変えることにより、こんな形にもできました。

HTML

<svg viewBox="0 0 425 300">
<path id="curve" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
   <text x="25">
      <textPath xlink:href="#curve">
         Dangerous Curves Ahead
      </textPath>
   </text>
</svg>