SVGのアイコンにhoverでふわっと色を付ける(SVG, JavaScript, CSS, Illustrator)

ミミウサ
ミミウサ

SVGで作成したアイコンの色が変えたいです。
以下のように動くものをお願いします。
●SVGアイコンにhoverすると色が変わる
●色変化はふわっと遅延させて変化
●SVGはillustratorからの書き出しで
●スクロール時にSVGアイコン色変化もする

Web関連の案件受注を増やすべく、今日も模写に励んでいる管理人です。

svgもすごく面白いですね。私もそうですが、DTP/イラストからWebに入ってきた方には案外とっかかりやすいと思いました。

本記事では「SVGのアイコンにhoverでふわっと色を付ける(SVG, CSS)方法」と「SVGのアイコンにスクロールで色をつける(JavaScript)方法 」をご紹介します。

SVGのアイコンにマウスオーバーでふわっと色がつくスクリプト(SVG, CSS)

マウスオーバーでアイコンや色が瞬時にくるくる変わるとき、人間の目はついていけないのでストレスとなります。

マウスオーバーでのリンク色の変更は、ゆっくり変わってかつ色変化量も少ない方が人間には見やすいですよね。

SVGのアイコンをhover時に色を変化させるときに、ゆっくりとふわっと色が変わって欲しくて試行錯誤した方法を紹介します。

マウスオーバーでSVGアイコンを緑、マウスアウトで白に戻る

「SVGのアイコンをhover時に色を変化」の作例がこちら。

JS-web-hover-svg2

 

Illustratorから「スクリーン用に書き出し」でSVG化

SVGとか言っても、色変えるくらいならHTML/SVG/CSSのみで対応可能なんですね。

ここまではすんなり進みました。SVG、使いやすく優秀ですね。

なお、私はAdobe族のDTPの人ですので、svgはIllustratorから「スクリーン用に書き出し」で吐き出しています。

SVGのアイコンに色を付ける svgはIllustratorから「スクリーン用に書き出し」

吐き出す前にレイヤー等不要なゴミをすべて削除します。今回は色はCSS/JavaScriptで操作するので、色なしにしてから吐き出します。

Illustratorからのsvgのゴミ取り

Illustrator上で色がついていたりすると吐き出したファイルにも「fill:#×××」と色指定が入ってきます。

svgにしてからスタイル関係を削除しても良いのですが、Illustratorでは塗りと線のカラーは別々で管理されているため、あとから削除方式だとさらに大変なことになります。(正確にはやってみたら大変なことになりました。)

吐き出した直後のsvgファイルがこちら。

今のバージョンのIllustratorはより「スクリーンに書き出し」機能が進歩したのですね。きれいに吐き出され、不要部分を削る程度のようです。

赤文字部が不要部分です。

<svg id="レイヤー_1" data-name="レイヤー 1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 76 74">
<title>アートボード 4</title>
<g id="検索_2" data-name="検索 2">
<path d="M9.08,50.26H32.2a2,2,0,0,1,2,
・・中略・・
,0-5.35-.9Z"/>
</g></svg>

作成したSVGアイコンにCSSで色変化を追加

このSVGとhtml/CSSは次のとおりです。

See the Pen JS-svg-mouse-hover-onlyCSS by ExDesign (@marimari1020) on CodePen.

SVGに色を付ける(JavaScriptのスクロールのアクションとの組み合わせ)

上記の例はCSSのみでhover時にSVGの色を変更するという処理をしていますが、次はJavaScriptで色を変更する場合です。

JavaScriptで色を変える方が便利な場合は、次のようなときになるでしょう。

次の作例は、ナビバーの背景が未スクロール時は透明・写真が透過で透けて見える状態、スクロールするとナビバーの背景が白に変わり写真はナビバーからは透けないサイトです。

スクロールで色が変わるナビのサンプル動画

このスクロールと連動したナビバー部分の色変更はJavaScriptを使っています。

ナビバー上のsvgアイコンの方も未スクロール時は白、スクロールしたら白だと見えなくなってしまうのでアイコンもスクロールに連動して灰色に変えたい場合はどうしたらよいでしょうか。

以下にこちらの作例のSVGアイコン部のみのhtml/css/svg/JSを紹介します。

See the Pen JS-svg-js by ExDesign (@marimari1020) on CodePen.

スクロールと連動でSVGアイコンの色を変更、かつ未スクロール時もhover時は緑、赤、青にゆっくり色が変わる作例です。

作例全体のコード一式はこちらです。

まとめ「SVGにhoverでふわっと色を付ける方法」が教えてくれたこと

SVGのアイコンにhoverでふわっと色を付ける(SVG, CSS)方法、SVGのアイコンにスクロールで色をつける(JavaScript)方法、IllustratorからのSVG書き出しを紹介いたしました。

SVGが思ったよりも扱いやすく、応用の効くフォーマットであるということが良く分かったため、より力を入れて勉強していくことにしました。

PR プログラミング&Webデザイン奮闘記

なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。
その質はばらつきが激しいと痛感。

3校の様子をレビューしますね。

通学型:料金は高いですが、対面なので先生は気合い入れて教えてくれるし、なにより同士となる生徒とのコミュニケーションは通学型でしか手に入らないと思いました。
仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。

オンライン型:オンライン型のスクールは私はこちら↓の侍エンジニア塾さんにお世話になりました。
私は当時、長期では通えなかったので侍エンジニア塾さんは1ヶ月コースがある点が良かったです。

私には都合が良いスクールでしたが契約する前に必ず体験を勧めます
詳しくは、以下の侍エンジニア塾さんの公式ページをご確認くださいね。

侍エンジニア塾での体験談は以下の記事でまとめています。
ご興味がある方は参考にしていただけると嬉しいです。

タイトルとURLをコピーしました