[CSS]svgの色を簡単に変えられるmaskの使い方と効かない時の対策

こんにちは、むったん（@6ttan）です。

たまにcssで表現が難しい形を求められることってありますよね。
私は先日、KV画像の下に上下が波線の背景画像の要素を作ることを求められました。
しかもKVに被る形で波線の背景画像が乗っていまして。

この場合pngで背景画像を作るか、cssで色付き丸と背景色の丸を重ねて頑張って波線を作ることが考えられますが、KVに被ってる時点で後者は使用不可。

お手上げだーい🙌と思って調べてたらsvg要素とmaskプロパティが適してるとのことだったので、備忘録を兼ねてご紹介します

maskプロパティとは

png画像、またはsvg要素を使って、対象の画像またはページの要素を隠します。

Can I use…を確認しても現状のブラウザでは大体使えるので、問題ないかと。
（IEが爆発してくれて本当によかった…）

今回はsvg要素を使ってページの要素を隠す方法を見ていきます。

上下波線の背景を作ってみる

See the Pen
Untitled by むったん (@6ttan)
on CodePen.0

コード説明

<div class=”waveTop__bg waveBG”></div>と<div class=”waveBtm__bg waveBG”></div>に背景としてmaskプロパティをあてています。

上記の親要素(.wave__area)に対してははみ出しても隠すようにoverflowを入れています。
mask-imageにはsvg書き出し後に取得できるコードをコピペで持ってきて、backgroundで色を決めています。
グラデーションにもできます！

mask-imageでsvgを使用する場合、urlは以下の内容になると思いますので適宜中身を変更して使ってください。

mask-image: url(‘data:image/svg+xml;charset=UTF-8,<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” viewBox=“#” # # #><path class=“###” d=“###”/></svg>’);

ちなみにsvgは以下のように作成しています。

このように作成したら、上用下用でそれぞれ書き出しして、それぞれのコードを取得します。

波線背景に挟まれた要素が入る部分は可変対応できるように、箱で囲ってあげているイメージです。
簡単でしょ？
簡単すぎて、cssだけでどうにかできないか考えてた時間がもったいなかったです。

maskが効かない時の対応策

mask-imgageでsvg要素が呼び出せない場合は、-webkit-mask-imageのように頭に-webkit-をつけてあげてください。
実は私も表示されなくて、色々試したのですが最終的にベンダープレフィックスをつけてあげれば解決でした。

確かにCan I use…で確認すると現在の最新版であるChrome, Edgeは-webkit-をつけてあげてとありますね。
※safari, firefoxは対応している