hoverしたときのSVGの色をCSSだけで変える方法

FRONTEND

css SVG

2019.05.3

2019.05.04

ちょっとしたアイコンなんかであれば画像よりも使い勝手の良いSVG。フリーでつかえるファイルも今や色々公開されていて、僕もサイト制作時にはよく使います。

一点だけ難点があるとすれば、hover時の色の変更でしょうか。javascriptをつかった方法や、HTMLに直接SVGコードを記述する方法等、色々な方法がありますがどれも一筋縄ではいかない感じです。

そんな中、比較的簡単にhover時のSVGの色を変更する方法をCODEPENで見つけました。javascriptは使わずに、CSSだけで実装できるみたいです。

サンプル

サンプルはこんな感じです。hover時のSVGのアイコンの色が見事に変わっています。

See the Pen
Background SVG Hovers with Mask by Chris Coyier (@chriscoyier)
on CodePen.

解説

厳密に言うと、SVGの色が変わっているわけではありません。アイコンの形でくり抜かれた70px×70pxの<span>の背景色が変わっているだけです。

.icon-bike {
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}
.icon-bell {
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}
.icon-arrow {
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-arrow-black.svg);
}

上記のソースの部分で、CSSのmaskプロパティをつかってアイコンの形にくり抜いています。

なお、CSSのmaskプロパティはFireFox、Operaでは対応していないとの記事もちらほらありますが、最新版のFireFoxであれば問題無く使えるようです。

この方法であれば、例えばCSSだけで作成されたボタンにも気軽にSVG画像を取り入れることが出来るのではないでしょうか。