文字が円形に沿って回転

2024年1月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、うまく表現できないのですが「文字が環状に配置されていて、ゆっくりと回転しているアレ」に挑戦してみたいと思います。

SVGをつくろう

参考：HARUNAFUJII｜【CSS+SVG】円に沿ってテキストが回転するアニメーション

この参考元のサイトがとても丁寧に分かりやすく説明してくれています。それでも難しすぎて全然わからないのですが、真似して挑戦してみましょう。

SVGを設置し、クラスをcircleTextとしておきます。

<div>で囲ってクラスをblockとしておきます。

<div class="block">
  <svg class="circleText"></svg>
</div>

viewBoxとpathで正円を描きます。pathのIDをcircle、クラスをcircleText__circleとしておきます。

<div class="block">
  <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>
</div>

テキストを配置します。

うちの社名「Chemist and Pharmacist」を入れてみましょう。
本当は上記が正式な表記なのですが、全部大文字にして、andは＆にしてみました（カッコイイから！）

<text>と<textPath>というタグを使います。2回社名を入れてみます。

<div class="block">
  <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">
        CHEMIST＆PHARMACIST CEMIST＆PHARMACIST
      </textPath>
    </text>
  </svg>
</div>

CSSを記述します。

.block {
  width: 160px;
  height: 160px;
  margin: auto;
}

.circleText {
  overflow: visible;
}

.circleText__circle {
  fill: none;
}

.circleText__text {
  fill: #32bdeb;
  font-size: 12px;
  font-weight: 700;
}

回転させてみよう

CSSに追記します。

参考元では時計回りですが、今回は反時計回りにしてみました。

.circleText {
  overflow: visible;
  animation: rotation 18s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

文字の色を一部変える場合は、色を変えたい文字を<tspan></tspan>で囲ってfillでカラーコードを設定したらできました。

まとめ

こんな感じでボタンの周りに文字を配置してみたいです。どうやってやるのかなあ。なんか適当にやったらできました

「ホバーすると円の半径が広がる」「ホバーに応じてアニメーションが変わる」とかにも挑戦してみたいです。