imgタグでページに配置したSVGの色を、CSSで変更する方法です。
この方法は以下の条件を満たしている必要があります。
・SVG画像を黒一色で書き出せる
・指定した色と多少の誤差があってもよい
●手順
1. ページ内に配置するSVG画像は黒一色にしておく。
2. 以下のサイトにアクセスします。
3. 「Target color」に変更後のカラーを入力し、「Compute Filters」をクリック。
4. カラー変更用のCSS（filterプロパティ）が出力されるので、SVG画像に対して適用する。
filter: invert(57%) sepia(34%) saturate(6436%) hue-rotate(160deg) brightness(93%) contrast(101%);
以上でCSSによって色を変更することができます。
ただ、実際に変更後の色をカラーピッカーで取得してみると指定した色と多少誤差があるようでした。
※例えば、上記のCSSはTarget color「#00a4d6」で出力しているのですが、
変更後の色は「#00a4d4」となっていました。
微差なので厳密なカラー指定がなければ問題ないと思います。
●参考
コメントする