この記事の概要
こんな感じで、ファーストビューの右下あたりでくるくるしてる要素、たまに見ますよね。
最近は見る機会も減ってきているので今更感があるし、CSS を使えば全然簡単にできますが、これをあえて svg だけで作ってみました。
自分の修行の一環を公開するような記事です。
作り方
下準備
まずは動かしたい svg を作ります。
文字部分はまとめて動かすのでグルーピングしておきます。
現時点のコードはこのようになっています。
<svg width="144" height="144" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
<!-- 矢印部分 -->
<path d="..." />
<!-- 文字部分 -->
<g>
<path d="..." />
<path d="..." />
<path d="..." />
<!-- 詳細なパスの記述 -->
</g>
</svg>
animateTransformの使用
svg でコード内の要素をアニメーションさせるときの 1 つのやり方としてanimateTransform1の使用があります。
今回でいうと、次のような記述をします。
- アニメーションさせる対象は何か
-
<g>でくくったパス - 後で id を指定する
-
- アニメーションのタイプは何か
- 回転
- 回転の基準点はどこか
- 中心
- 144 x 144 のサイズなので、実際の座標は
72, 72
- 何秒かけてアニメーションをするか
- 20 秒
- アニメーションのリピート回数は何回か
- 無限
これをコードに適用します
<svg width="144" height="144" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
<!-- 矢印部分 -->
<path d="..." />
<!-- 文字部分 -->
<g
+ id="rotating-group"
>
<path d="..." />
<path d="..." />
<path d="..." />
<!-- 詳細なパスの記述 -->
</g>
+ <animateTransform
+ xlink:href="#rotating-group"
+ attributeName="transform"
+ attributeType="XML"
+ type="rotate"
+ from="0 72 72"
+ to="360 72 72"
+ dur="20s"
+ repeatCount="indefinite"
+ />
</svg>
これで、CSS を 1 行も書かずにアニメーションさせられました。
それ以外の部分のコードをちょろちょろっと書けば、冒頭に載せたような見た目となります。