CSSだけでSVGの色を変える2

CSS3のmaskを使えば簡単だった。
背景色を指定して、SVGでマスクする。背景をグラデーションにすればグラデーションになる。

?

1 2 3

mask: url(file.svg) no-repeat; mask-size: contain; background-color: #ffffff;

もちろんブラウザを選ぶが、条件さえ合えば一番簡単だ。
ってかmaskなんて機能があったなんて知らなかったよ。文字マスクもできるし、いろいろできそう。