超簡単!SVGでアニメーションしてみた!|Blog|株式会社トライム
超簡単!SVGでアニメーションしてみた!
2016.10.12
![記事サムネイル](https://contents.try-m.co.jp/wp-content/uploads/2016/10/svgcatch.jpg)
こんにちわこんばんわ、ちばです。
早速ですが、弊社ホームページのロゴがSVGになっているって知ってました?
トライムに入社するまでSVGを触ったことがなかったので、SVGを楽しく理解するためにロゴをアニメーションさせてみました。
ロゴ動かしてみた✌(‘ω’)✌
とりあえずサンプルコードを貼ります
(動かない場合はRERUNを押してください)
簡単に解説すると、”fill”というのが塗り。”stroke”というのが枠線です。
”stroke-width”が枠線の太さ、stroke-dasharrayとstroke-dashoffsetで線を書く動きを付けています。
これらをkeyflamesで制御してあげるだけで上記のような動きをつけることが出来ます。
動きをつけるのは仕組みをある程度理解しないと難しいですが、”fill”と”stroke”の2つだけでも覚えておくとhover時に色を変えたりなど簡単な動きをつけることならできそうですね。
まとめ
IE9までの対応で済む昨今ではSVGを使うのが主流になってきてると思います。
実装は意外と簡単なので是非覚えていきたいですね。
※imgタグで出力したSVGはCSSで色など制御できないので注意です。
Contact
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00
![ロゴ](/wp-content/themes/trym/images/top/contact-logo.png)