SVGをぬるぬる動かしたいので勉強中

最終更新日

SVGアニメーション習作。

svg logo

D3のトランジション機能を使うことで殆どの用途を満たせるとは思うのですが、一定間隔でループするようなアニメーション(例えば点滅するマーカーなど)は、svgのanimate機能を使って最初に定義してしまった方が書きやすいかな?と思っていろいろ試しています。

今のところ詳しく解説できるほどSVGアニメーションについて理解できていないのですが、ひとまず習作として作ったもののサンプルコードだけ載せておきます。

参考

An Intro to SVG Animation with SMIL by Noah Blon on CodePen

The State of SVG Animation : Adobe Dreamweaver Team Blog

svg要素の基本的な使い方まとめ

アニメーションパス

上記参考サイトからパクったものです。なので詳細については上記サイトをご覧ください。
pathの子要素としてanimate要素を登録してあります。ひとつめのanimate要素はパスの変形を、ふたつめのanimate要素はfill(塗り)の変移を指定しています。

example

再利用

アニメーション指定してあるpath要素をdefsの中に入れ、use要素で呼び出して使うことで再利用が可能です。
また今回はuse要素のtransform属性でスケールを1/4に縮小して表示しています。

example

D3.jsで使う

D3を使ってアニメーションパスを散布図の点として表示してみました。
見やすくはありません。あまり使いどころは無いかもしれませんが、D3で表示した地図上のマーカーをアニメーションさせたいときなどに便利かもしれません。

example