円弧に沿って回転するテキストのアニメーション要素の作成方法

今回は、SVG パスを使って円弧に沿ったテキストを表示し、そのテキストをアニメーションで回転させる実装方法を、汎用性を前提にして考えてみます。
ここで紹介する SVG コンテンツは、例えばロゴ、バッジ、装飾要素など様々なデザインに活用することを想定しています。

まずは、今回作成するコンテンツのデモをご覧ください。

完成デモ

See the Pen Curve Text on SVG Path by digistate (@digistate) on CodePen.

1. 基本構造と仕組み

まず、このSVGテキスト実装の基本的な仕組みを説明します。

HTML

<div class="curve-text">
  <svg viewBox="0 0 100 100">
    <!-- 円弧のパス定義 -->
    <path id="curve" d="M 0 50 A 50 50 0 1 1 0 50.5 z" fill="transparent"></path>
    
    <!-- 回転するテキスト -->
    <g class="rotating-text">
      <text class="outer" dy="-0.8em">
        <textPath href="#curve" textLength="310" xml:space="preserve" startOffset="2">
          Best Luxury Interior Design Trends...
        </textPath>
      </text>
    </g>
    
    <!-- 中央のテキスト -->
    <text class="inner" x="50" y="50" text-anchor="middle" dominant-baseline="middle">
      <!-- テキスト内容 -->
    </text>
    <!-- 装飾線 -->
    <g>
      <line class="divider" x1="25" y1="50" x2="75" y2="50"></line>
      <circle class="divider-dot" cx="50" cy="50" r="1"></circle>
    </g>
  </svg>
</div>

ポイント

SVGの座標系:
viewBox="0 0 100 100"で100×100の座標系を定義し、中心は(50, 50)になります。
パスの定義:
d="M 0 50 A 50 50 0 1 1 0 50.5 z"は半径50の円弧を定義しています。
テキストパス:
textPath要素がhref="#curve"でパスを参照し、テキストをパスに沿って配置します。

2. CSS 変数による汎用性を考慮したカスタマイズ

今回のサンプルの特徴は、CSS変数（カスタムプロパティ）を活用して様々な要素を簡単にカスタマイズできる点です。
CSS には以下のように CSS 変数を用意しています。

CSSCSS 変数

.curve-text {
  --color: #ccc;               /* パスと文字のカラー */
  --outer-font-size: 11px;     /* 外側のフォントサイズ */
  --inner-font-size: 30px;     /* 円内のフォントサイズ */
  --display-size: 200px;       /* 実際の表示サイズ */
  --svg-size: 200;             /* 表示サイズ(pxなし) */
  --svg-base-size: 100;        /* viewBoxのサイズ */
  --rotation-speed: 20s;       /* 回転速度 */
  --rotation-direction: normal; /* 回転方向 */
  --scale-factor: calc(var(--svg-size) / var(--svg-base-size));
  
  /* 以下省略 */
}

変数の役割と使い方

--color: テキストやパスの色を一括で変更できます。
--display-size: 実際の表示サイズを指定します（幅と高さ両方に適用）。
--outer-font-sizeと--inner-font-size: 外周と中央のテキストサイズを個別に調整できます。
--rotation-speed: アニメーションの速度を秒単位で指定します。
--rotation-direction: normal（時計回り）またはreverse（反時計回り）を指定できます。

これらの変数は、HTMLのインラインスタイルで簡単に上書きできます：

<div class="curve-text" style="--display-size:300px; --color:#ff0000; --rotation-speed:15s;">
  <!-- ここにSVG -->
</div>

3. 自動スケーリングの仕組み

SVGのサイズ変更時に文字や線の太さが適切にスケーリングされる仕組みは、このサンプルの重要なポイントとなります。

--scale-factor: calc(var(--svg-size) / var(--svg-base-size));

// 外周(円弧)のテキスト
text.outer {
  font-size: calc(var(--outer-font-size) / var(--scale-factor));
}
// 円弧内のテキスト
text.inner {
  font-size: calc(var(--inner-font-size) / var(--scale-factor));
}

スケーリングの解説

--scale-factor: SVGの実際のサイズ(--svg-size)とベースサイズ(--svg-base-size)の比率を計算します。
フォントサイズの計算: フォントサイズをスケールファクターで割ることで、SVGのサイズが変わっても文字の相対的な大きさが維持されます。
vector-effect: non-scaling-stroke: パスやラインの太さがSVGのサイズ変更に影響されないようにします。

これにより、SVGのサイズを変更しても、すべての要素が適切な比率で表示されます。

4. テキストパスの調整

円弧に沿ったテキストの配置は、細かい調整や配慮が必要となります。

<textPath href="#curve" textLength="310" xml:space="preserve" startOffset="2" lengthAdjust="spacing">
  Best Luxury Interior Design Trends and Innovative Decoration Ideas
</textPath>

重要な属性

textLength="310": テキストの全体の長さを指定します。
円周の長さ（2πr = 2×3.14×50 ≈ 314）より少し短くすることで、テキストの始点と終点に余白をとり、1文字目と最後の文字の間の間隔がなくならないようにしています。
xml:space="preserve": テキスト内の空白を保持します。
startOffset="2": テキストの開始位置をパスの始点から少しずらします。
lengthAdjust="spacing": テキストの長さを調整する際、文字間のスペースのみを調整し、文字自体の幅は変更しません。

テキストの文字数の調整

テキストが長すぎる場合は文字が詰まり、短すぎる場合は文字が引き伸ばされます。

適切な文字数を定める目安

パスの長さを計算（円周 = 2πr）
テキストの量に応じて、その値より少し小さい値を設定
視覚的に確認しながら微調整

5. アニメーションの実装

テキストの回転アニメーションは、CSSアニメーションで実装しています。

.rotating-text {
  transform-origin: 50px 50px; /* viewBoxの中心 */
  animation: rotate var(--rotation-speed) linear infinite;
  animation-direction: var(--rotation-direction);
}

// 反時計回りに回転するキーフレーム
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

アニメーション(回転テキスト)のポイント

transform-origin: 50px 50px: 回転の中心点をSVGの中心に設定
animation: rotate var(--rotation-speed) linear infinite:
- linear: 一定の速度で回転
- infinite: アニメーションを無限に繰り返す
animation-direction: var(--rotation-direction): 回転方向を変数で制御

回転方向を変更するには、キーフレームの値を調整するか、--rotation-direction変数をreverseに設定します。

6. 円弧内の中央テキストの配置

中央のテキストを正確に配置するには、SVGのテキスト配置属性を理解する必要があります。

<text class="inner" x="50" y="50" text-anchor="middle" dominant-baseline="middle">
  <tspan x="50" dx="0.14em" dy="-0.72em">INTERIOR</tspan>
  <tspan x="50" dy="1.6em">2026</tspan>
</text>

テキスト配置のポイント

text-anchor="middle": テキストを水平方向に中央揃え
dominant-baseline="middle": テキストを垂直方向に中央揃え
tspan要素: 複数行のテキストを配置するために使用
dy="-0.72em"とdy="1.6em": 行間の微調整（相対的な単位emを使用）

複数行のテキストを中央に配置する場合、最初の行を上に、次の行を下に移動させることで、全体が中央に配置されるようにします。

微妙に水平・垂直方向の中心からずれる場合があるため、その辺りをdx, dy で微調整します。

7. 装飾線のアニメーション

今回のデモでは、円弧内の2行のテキストの間にライン(.divider)を表示しています。
この中央の装飾線には、表示時にフェードインアニメーションを適用しています。

.divider {
  stroke: var(--color);
  stroke-width: 0.5px;
  vector-effect: non-scaling-stroke;
  transform: scaleX(0);
  transform-origin: center;
  animation: fadeInLine 1.2s ease-out .3s forwards;
}

// 中心から左右にラインが伸びるアニメーション
@keyframes fadeInLine {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

アニメーションの解説

transform: scaleX(0): 初期状態では線が見えない（幅が 0）
transform-origin: center: 中央から拡大
animation: fadeInLine 1.2s ease-out .3s forwards:
- 1.2s: アニメーション時間
- ease-out: 終わりに向かって徐々に遅くなる
- .3s: 0.3秒の遅延後に開始
- forwards: アニメーション終了後も最終状態を維持