概要
従来、SVG画像の色を変更するにはインラインでHTMLにSVGを書き出し、CSSのfillプロパティにて色を指定する方法が一般的であったが、maskプロパティを使用することで、より簡単にSVG画像の色を変更できる。用途・要件
- CSSにてSVG画像を読み込んでいて、その画像の色を変更したい時に使用。
- SVG画像をインラインでHTMLに書き出すことなく色を変更できる。
- SVG画像を色ごとに書き出し・出し分けすることが不要になる。
- backgroundプロパティのように簡単に使用することが可能。
- mask | MDN
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
