超簡単！SVGでアニメーションしてみた！｜Blog｜株式会社トライム

こんにちわこんばんわ、ちばです。

早速ですが、弊社ホームページのロゴがSVGになっているって知ってました？

トライムに入社するまでSVGを触ったことがなかったので、SVGを楽しく理解するためにロゴをアニメーションさせてみました。

ロゴ動かしてみた✌(‘ω’)✌

とりあえずサンプルコードを貼ります
（動かない場合はRERUNを押してください）

簡単に解説すると、”fill”というのが塗り。”stroke”というのが枠線です。

”stroke-width”が枠線の太さ、stroke-dasharrayとstroke-dashoffsetで線を書く動きを付けています。

これらをkeyflamesで制御してあげるだけで上記のような動きをつけることが出来ます。

動きをつけるのは仕組みをある程度理解しないと難しいですが、”fill”と”stroke”の2つだけでも覚えておくとhover時に色を変えたりなど簡単な動きをつけることならできそうですね。

まとめ

IE9までの対応で済む昨今ではSVGを使うのが主流になってきてると思います。

実装は意外と簡単なので是非覚えていきたいですね。

※imgタグで出力したSVGはCSSで色など制御できないので注意です。