円状にテキストがくるくる回るアニメーション

2024.03.27

円状にテキストがくるくる回るアニメーション

fujii

2024.03.27

はじめまして。
1月からコーダーとしてKNAPに仲間入りしました藤井です。
今回は、SVGで描画した図形の上にテキストを配置する方法を紹介しながら、テキストが円の上をくるくると回転するアニメーションを作成します！

完成形

See the Pen SVG circle text – fujii by knap_develp (@knap_develp) on CodePen.

KNAPの合言葉(?)「Design trekking.」を回転させてみました。かわいい！

実装は、次の手順で進めていきます。
1. SVGで円を作成する
2. 円に沿ってテキストを配置する
3. CSSでスタイルを追加する
4. CSSでアニメーションを追加する

それでは、詳しい実装方法をみていきましょう！

実装① SVGで円を作成する

SVGで円を作成します。
図形の描画について、段階を踏んで紹介していきますね。

①-1. 描画エリアを作成する

今回は、正円を描きたいので「viewBox=”0 0 100 100″」と指定して、正方形の描画エリアを作成しました。

<svg class=”circleText” viewBox=”0 0 100 100”>

</svg>

①-2. 描画エリアに円を描く

図形（線）は「<path d=”パスコマンド”>」で描画します。

パスコマンドは6タイプ-20種類あるので、作成する図形によって使い分けていきます。
円を描くときは「Move Toコマンド（M）」「楕円円弧曲線（a）」「Close Pathコマンド（z）」で、次の値を指定します。
（参考：MDN Web Document | SVG属性リファレンス-d）

・Move To コマンド（M）：「M x座標 y座標」でパスの開始位置を指定
・楕円円弧曲線（A）：「A rx ry 角度大円弧フラグ 掃引フラグ dx dy」で円を描く
・Close Pathコマンド（z）：「z」でパスを閉じる

①-2-1. パスの開始位置を決める

「Move Toコマンド」でパスの開始位置を決めましょう。
図の点線の位置に円を描きたいので、viewBoxとの接点であるx座標「0」、y座標「50」を開始位置とします。
これをd属性で定義すると「d=”M 0 50″」となります。

①-2-2. 円を描く

「楕円円弧曲線」の値を指定して円を描きます。

・rx / ry：x軸 / y軸の半径の長さ
・角度：x軸に対する楕円の角度
・大円弧フラグ：大きい円弧 (1)/を描くか、小さい円弧(0)
・掃引フラグ：時計回りの円弧 (1) を描くか、反時計周りの円弧 (0)
・x / y：パスの終了位置

今回は、100×100のviewBoxに半径50の円を時計回りで描くとして、楕円円弧曲線の値は「A 50 50 0 1 1 0 51」となります。

終了位置は、開始位置と全く同じ値にすると点が移動しないことになり、何も描画されなくなるため、終了位置のy軸を開始位置+1の「51」にします。
※ 掃引フラグを反時計周り(0)にした場合の終了位置は「0 49」になります。

①-2-3. パスを閉じる

最後にClose Pathコマンドの「z」でパスを閉じたら、円の完成です！

<svg class=”circleText” viewBox=”0 0 100 100”>
  <path id="circle" class="circleText__circle" d="M 0 50 A 50 50 0 1 1 0 51 z"/>
</svg>

実装② 円に沿ってテキストを配置する

前ステップで作成した円の上にテキストを配置します。

SVGでテキストを追加する際は<text>を使用しますが、パスに沿ってテキストを配置する場合は、さらに<textPath>のXlink属性に対象のパスのアンカーリンクを指定しましょう。

今回は、前ステップで作成した円の<path>に「id=”circle”」を追加し、<textPath>のXlink属性に「xlink:href=”#circle”」を指定します。
すると、円の上にテキストが配置されるようになります。

<svg class="circleText" viewBox="0 0 100 100">
  <path id="circle" class="circleText__circle" d="M 0 50 A 50 50 0 1 1 0 51 z"/>
    <text class="circleText__text">
      <textPath xlink:href="#circle">
         KNAP! Design trekking. KNAP! Design trekking.
      </textPath>
    </text>
</svg>

実装③ CSSでスタイルを指定する

CSSでお好みのスタイルに整えていきましょう。
今回は、次の通り指定しました。

.block {
  // 全体の大きさと配置
  width: 160px;
  height: 160px;
  margin: auto;
}
.circleText {
  // 円からはみ出した部分を表示
  overflow: visible;
  &__circle {
    // 円の塗りを削除
    fill: none;
  }
  &__text {
    // テキストのスタイル
    fill: #000;
    font-size: 12px;
    letter-spacing: 0.04em;
  }