HTMLにSVGを使って文字を直線や円弧やベジェ曲線に沿って表示する

SVGを使うと文字を直線や円弧やベジェ曲線に沿って配置することが出来ます。

直線に沿って文字列を配置

<svg style="width:100%;max-width:600px;" viewBox="0 0 400 120">
  <path id="path1" d="M10,100 L370,20" style="stroke:#f00;stroke-width:4px;" />
  <text style="font-size:10px;stroke:#00f;" dy="10">
    <textpath xlink:href="#path1">この文字が線に沿って表示されます</textpath>
  </text>
</svg>

円弧に沿って文字列を配置

<svg style="width:100%;max-width:600px;" viewBox="0 0 400 120">
  <path id="path2" d="M10,100 a190,50 -6.34,0,1 360,-40" style="fill:none;stroke:#f00;stroke-width:2px;" />
  <text style="font-size:10px;stroke:#000;letter-spacing:0.5em;stroke:#f0f;" dy="-4">
    <textpath xlink:href="#path2">この文字が線に沿って表示されます</textpath>
  </text>
  <text style="font-size:10px;stroke:#000;letter-spacing:0.3em;stroke:#0ff;" dy="10">
    <textpath xlink:href="#path2">この文字も線に沿って表示されます</textpath>
  </text>
</svg>

2次ベジェ曲線に沿って文字列を配置

<svg style="width:100%;max-width:600px;" viewBox="0 0 400 120">
  <path id="path_animationQ" d="M10,100 q180,-80 360,0" style="fill:none;stroke:#f00;stroke-width:2px;" />
  <text style="font-size:10px;stroke:#000;letter-spacing:0.3em;stroke:#f0f;opacity:0.5;" dy="10" text-anchor="middle">
    <textpath xlink:href="#path_animationQ" startOffset="50%">この文字が線に沿って表示されます</textpath>
  </text>
</svg>