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

アバター画像 fujii

10

はじめまして。
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. 描画エリアを作成する

<svg>にviewBox属性で描画エリアのアスペクト比とその中の要素の相対的なサイズを指定します。
左上をx, y座標の0として「viewBox=”x座標の始点 y座標の始点 viewBoxの幅 viewBoxの高さ”」で指定します。

今回は、正円を描きたいので「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 角度 大円弧フラグ&nbsp;掃引フラグ 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;
  }

実装④ CSSでアニメーションを追加

最後に円を回転させるアニメーションを追加したら完成です!

おわりに

SVGでの図形の描画とその上にテキストを配置する方法を紹介しながら、回転するテキストアニメーションを作成しました。

SVGの図形の書き方は少し複雑ですが、さまざまな図形を書けるようになると表現できるデザインの幅がぐんと広がってよりコーディングが楽しくなりそうですね!
今回は円を作成しましたが、他の図形にもまたチャレンジしてみたいと思います!

長くなりましたが、最後まで読んでいただきありがとうございました。

参考にしたサイト

MDN Web Document | SVG: スケーラブルベクターグラフィック
scrapbox | teamlab-frontend「CSS+SVGで円上に文字を配置する」
Programmer Life「HTML5でSVGのpathで線を描く!」

まるさんかくしかく、、次はなににしようかな。

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
エンジニアを個人の集まりからチームに変えた話し WordPressで目次を作る方法