今回はパスに沿って文字を配置する方法を勉強します・・・
デザインのポイントに使えそうな技術だね！
以前SVGでテキストを表示する記事を書いていますので、テキスト表示の基礎はこちらでどうぞ↓
というわけで今回も参考書は「Webで使える!SVGファーストガイド」です。
今回の技術を駆使して円状にテキストを配置して回す、という、Webサイトデザインでもよく見るアレを作ってみました。
See the Pen cm02 by inu (@tenp) on CodePen.
解説はまた記事の後半に載せています。
テキストをパスに沿わせる
SVGでテキストをパスに沿わせるには、
●基準線となるパスを path 要素で描画し、 id 属性で path 要素にID名をつける
● text 要素で表示する文字の書式を指定する
●表示する文章を textPath 要素で囲み、xlink:href 属性にパスのID名を指定する
基本のコード
＜path d=”パスの座標” id=“パスにID名をつける”/＞
＜text fill=”●●” font-size=”●●” font-weight=”●●”テキストの書式を指定／＞
＜textPath xlink:href=”#ID名”＞
”入力する文章を入れる”
＜/textPath＞
＜/text＞
path要素のあとにtext要素でtextPath要素をはさむという構造になっています。
<svg width="400px" height="200px" viewBox="0 0 400 200">
<path d="M 20,20 Q 80,20 150,100 T 380,180" id="path01" fill="none" stroke="red"/>
<text fill="blue" font-size="25" font-weight="bold">
<textPath xlink:href="#path01">
これはパスに沿ったテキストですよ
</textPath>
</text></svg>パスを見えなくする
沿わせているパスを見えなくするときは、 path 要素を defs 要素で囲みます。
＜defs＞～＜/defs＞の中の記述は定義として扱われるので画面に描画されません。ID名などで呼び出し、他の要素から参照される設定となります。
コード
＜defs＞
＜path d=”パスの座標” id=“パスにID名をつける”/＞
＜/defs＞
上で描いた例で、パスを消してみます。
<svg width="400px" height="200px" viewBox="0 0 400 200">
<defs>
<path d="M 20,20 Q 80,20 150,100 T 380,180" id="path01" fill="none" stroke="red"/>
</defs>
<text fill="blue" font-size="25" font-weight="bold">
<textPath xlink:href="#path01">
これはパスに沿ったテキストですよ
</textPath>
</text></svg>stroke=”red”とあるのに、＜defs＞で囲ってあるので描画はされていません。
円状に配置する
では冒頭に言いました、円状に配置されたテキストについて解説します。
<svg width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<path d="M 15,100 a 85,85 0 1,1 0,1 z" id="circleMozi" />
</defs>
<text fill="blue" font-size="15" font-weight="bold" textLength="530" dx="0">
<textPath xlink:href="#circleMozi">
円状に配置されたテキストだよ。パスは円だよ。
</textPath>
</text></svg>沿わせるパス
円弧を描画するAコマンドを使用します。記述を簡単にするため相対的な値を使いたいので、厳密にはaコマンド（小文字にすると値が相対的なものということになります）を使うということです。
path d=
“M 15,100（始点） a 85,85（円弧半径）
0（円の角度） 1,1（円の選択） 0,1（移動先座標） z（始点へ閉じる）”
図示すると以下のようになります。移動先座標：現在点は始点として、そこから相対パスで0,1（1ピクセル下）を選ぶことによって、ほぼ同じ位置に戻ってくる円を表示できます。
文字がはみ出すことを許す場合はoverflow: visibleをかけることによって文字がきちんと表示されます。
textLength=”●●”に円周の長さを設定すれば、その長さに文字は均等割り付けされます。
dx=”●” dx,dy属性を指定するとその分文字のスタート位置がずらされるので、調整に使います。
円弧を描画するパスについては以下をどうぞ↓
アニメーションをつける
transform-origin: 50% 50%で中心を基点にし、transform:rotate(360deg)で回すアニメーションをつけたら出来上がりです。
width,heightは調整用です。
svg {
transform-origin: 50% 50%;
animation:rotate 10s linear infinite;
width:200px;
height:200px;
}
@keyframes rotate {
100% {
transform:rotate(360deg);
}
}
コメント