トップへ(mam-mam.net/)

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>