Zenn
🌈

「mask-image」でSVGアイコンの色をCSSで変えよう！　～mask-imageの便利な使い方紹介を添えて～

2022/05/13に公開
CSS
tech

SVGで作成されたアイコン画像に対して、CSSで色を指定したいということありますよね。
そういった場合、SVGをインラインでHTMLに書き出し、fillで色を指定する方法が一般的でした。

しかし、IEのサポートが終了して対応の必要がなくなる今、SVGの色変えは mask-image で簡単に実現できます。
以下にその例を示します（ついでに mask-image のその他の使い方も紹介しています）。

mask-image とは？

その名の通り、要素を マスク するCSSプロパティで、指定した画像で要素をくりぬく機能です。

https://developer.mozilla.org/ja/docs/Web/CSS/mask-image

IE以外の主要なブラウザでサポートされています。
ただし、Chromeや、（15.4より前の）Safariでは -webkit-mask-image として、プレフィックスを付ける必要があります。
（autoprefixerを使っていれば特に気にする必要はありません。）

関連プロパティには

  • mask-image
  • mask-position
  • mask-size
  • mask-repeat

などがあり、見てわかる通り background-image と指定の仕方はほとんど変わりません。

mask-image でSVGの色を変える

  1. background-color で要素を塗りつぶす
background-color: #61C4DF;
  1. mask-image でアイコンの形にくりぬく
mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path d="M25.133,14.100 L2.472,0.915 C1.673,0.450 0.675,1.031 0.675,1.961 L0.675,28.330 C0.675,29.260 1.673,29.841 2.472,29.376 L25.133,16.191 C25.932,15.727 25.932,14.564 25.133,14.100 Z" /></svg>');
/* この例ではSVGを直接入れていますが、SVGファイルのパスでも可 */
/* mask-image: url(/images/icon.svg); */
mask-repeat: no-repeat;
mask-position: center;

この方法で指定することにより、 background-color に指定した色でアイコンの色を変えることが可能になります。
background-color: currentColor; にしておけば、 color に合わせることも可能ですし、
background-image: linear-gradient(~); と組み合わせればグラデーションアイコンも作成可能です。

ちなみに、今回この記事を書くにあたって調べていたら、MDNのアイコンでもこの方法が使用されていることを発見しました。
「ブラウザーの互換性」のテーブルの部分です。

その他の mask-image の使い方

ワイプ出現

下記のように、mask-positionを操作することで、ワイプのように左から右に登場するようなアニメーションを付けることができます。

mask-image: linear-gradient(to right, black 0% 50%, rgb(0, 0, 0, 0.2) 50% 100%);
mask-size: 200% 100%;
mask-repeat: no-repeat;
mask-position: 100%;
transition: mask-position 0.5s;
input:checked ~ & {
    mask-position: 0;
}

動作のイメージとしては、こういう感じです。

|←   200%   →|
■■■■■■■□□□□□□□ (mask-position: 100%;)
       element
          ↓
    ■■■■■■■□□□□□□□ (mask-position: 50%;)
       element
          ↓
       ■■■■■■■□□□□□□□ (mask-position: 0;)
       element

mask-sizeを横幅200%にすることで、要素をはみ出す大きさにして、
最初は黒部分を要素の外にはみ出させておき、
条件によってmask-positionを移動させることで、表示されるようにします。

グラデーションで透過させる

「だんだんと透過させたい」というときもmask-imageが使えます。
この実装は本当にシンプルです。linear-gradientで作った黒と透明のグラデーションをmask-imageに適用するだけです。

mask-image: linear-gradient(to right, black 30%, transparent);

それではみなさま、素敵な mask-image ライフを～！

GitHubで編集を提案

Discussion