今回は、クルクル回る円に沿ったテキストデザインの実装方法を紹介します。
画像でも作れますが、CSSとSVGを使って作っていきたいと思います。
早速、どんなデザインなのか、完成形からみていきましょう。
もくじ
完成形
「Hello world!」のテキストでできた円がクルクルと回っていますね。かわいい！
それでは手順を確認して、作っていきましょう。
See the Pen 円に沿って文字を配置する by Haruna Fujii (@haruna-f) on CodePen.
手順の確認
実装の手順を確認しましょう。
SVGで描いた図形の上にテキストを配置して、CSSでスタイルを整える方法で作成します。
ソースコードの解説
① SVGで円を描く
SVGで円を作成します。少し難しいので段階を踏んで解説していきますね。
①-１. 描画エリアを指定する
<svg class="circleText" viewBox="0 0 100 100">
</svg>まずは<svg>タグにviewBox属性で描画エリアのアスペクト比とその中の要素の相対的なサイズを指定していきます。
左上をx, y座標の0として「viewBox=”x座標の始点 y座標の始点 viewBoxの幅 viewBoxの高さ“」で指定します。
今回は、正円を描くために「viewBox=”0 0 100 100″」で正方形の描画エリアを作成しました。
①-２. 描画エリアに円を描く
図形（線）の描画は「<path d=”パスコマンド”>」で定義していきます。
<svg class="circleText" viewBox="0 0 100 100">
<path class="circleText__circle" d="M 0 50 A 50 50 0 1 1 0 51 z"/>
</svg>パスコマンドとは、viewBoxで指定した描画エリアにx, y座標の値などで描く線を指示するコマンドです。
コマンドは全部で6タイプ-20種類ありますが、今回は「Move Toコマンド（M）」「楕円円弧曲線（a）」「Close Pathコマンド（z）」を使って円を描きます。
d属性 – 使用するパスコマンド
- Move To コマンド（M）
「M x座標 y座標」でパスの開始位置を指定 - 楕円円弧曲線（A）
「A rx ry 角度 大円弧フラグ 掃引フラグ dx dy」で円を描く - Close Pathコマンド（z）
「z」でパスを閉じる
①-２-１. パスの開始位置を決める
まずは「Move Toコマンド」でパスの開始位置を決めましょう。
点線の位置に円を描きたいので、viewBoxに触れているx座標「0」、y座標「50」を開始位置とします。
これをd属性として定義すると「d=”M 0 50″」となります。
①-２-２. 円を描く
楕円円弧曲線のパラメータを確認しましょう。
楕円円弧曲線のパラメーター
- rx / ry：x軸 / y軸の半径の長さ
- 角度：x軸に対する楕円の角度
- 大円弧フラグ：大きい円弧 (1)/を描くか、小さい円弧(0)
- 掃引フラグ：時計回りの円弧 (1) を描くか、反時計周りの円弧 (0)
- x / y：パスの終了位置
それでは円を描いていきます。
半径の長さは100×100のviewBoxいっぱいに円を描くので「rx / yx」の値は共に「50」になり、正円の角度は何度でも見た目に変化はないので「0」としておきましょう。
掃引フラグは、どちらでも同じ結果になりますが今回は「1」の時計回り。
終了位置は、x軸は開始位置と同じ「0」、y軸は開始位置+1の「51」にします。
理由は、開始位置と全く同じ値にすると点が移動しないことになるので何も描画されなくなってしまうからです。
終了位置は、一周回って開始位置の1つ手前で終了するように指定しましょう。
※ 掃引フラグを反時計周り(0)にした場合、終了位置は「0 49」になります。
大円弧フラグについては、違いが理解できず…（ToT）
「0」にすると何も描画されなくなってしまったので「1」にしています。
また理由がわかったら更新しますね！
d属性にこの円のコマンドを追記すると「d=”M 0 50 A 50 50 0 1 1 0 51“」となります。
①-２-３. パスを閉じる
最後にClose Pathコマンドの「z」をでパスを閉じたら、円の完成です！
d属性は「d=”M 0 50 A 50 50 0 1 1 0 51 z“」となります。
② テキストを円に沿って配置する
「Hello world!」というテキストを円に沿って配置していきましょう。
<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">
Hello world! Hello world! Hello world! Hello world!
</textPath>
</text>
</svg>SVGにテキストを加えるときは、<text>要素に追加したいテキストを入力します。
さらにパスに沿ってテキストを配置するときは、<textPath>要素内にテキストを入力してXlink属性に対象のパスのアンカーリンクを指定しします。
今回は、①で作成した円に<path>に「id=”circle”」を指定して、<textPath>のXlink属性に「xlink:href=”#circle”」と指定しましょう。
そうすると①で作成した円の上にテキストが配置されます。
③ CSSでスタイルを指定する
CSSとクラスセレクターでスタイルを整えていきましょう。
③-１. 円のスタイルを変更する
この時点では円が黒く塗りつぶされていて、文字も四角で切り抜かれているので調整しましょう。
viewBoxからはみ出た部分も見えるようにするには、.circleTextセレクターに「overflow=”visible”」を指定します。
次に、円のパス要素である.circleText__circleセレクターに「fill=”none”」を指定して塗りをなくします。
③-２. 大きさを決める
SVCのviewBoxは相対的な大きさを表していて、実際の大きさではないので、width/heightで全体の大きさを指定しましょう。
要素を中央に置きたかったので.block要素を追加していますが、SVG（.circleText）に直接指定しても問題ありません。
③-３. テキストを彩る
文字の大きさや間隔など調整して、お好みのデザインに調整しましょう。
色は「fill」で指定します。
<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">
Hello world! Hello world! Hello world! Hello world!
</textPath>
</text>
</svg>
</div>.block {
// ③-2. 大きさを決める
width: 160px;
height: 160px;
margin: auto;
}
.circleText {
// ③-1. はみ出た部分も見えるようにする（overflow）
overflow: visible;
&__circle {
// ③-1. 黒い塗りを消す（fill）
fill: none;
}
&__text {
// ③-3. テキストを彩る
fill: green;
font-size: 12px;
letter-spacing: 0.03em;
}
}④ CSSでアニメーションを追加する
最後にanimationで円を回転させたら完成です！
.circleText {
overflow: visible;
// ④ 回転するアニメーション
animation: rotation 18s linear infinite;
// == 省略 ==
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}おわりに
今回は、SVGのpathを使ってテキストを円に沿って配置する方法を紹介しました。
SVGの図形の書き方が少し複雑ですが、pathを使って様々な図形を書けるようになると表現できるデザインの幅がぐんと広がりますね！
紹介した以外にも、他の図形を描くためのパスコマンドがあるので、ぜひ様々な図形でチャレンジしてみてください。
