要素の色を CSS で変更する方法 (fill) [SVG]

fill

参考：

fill | MDN

文字色と同じ色に塗る

svg.fill-color {
  fill: currentColor;
}

参考：

SVG 画像を CSS で文字色と同じ色に塗る – Qiita

SVG の色を CSS 上で変えてしまう方法 | 狛ログ

もっと早く知りたかった CSS3 の currentColor | Cubix

SVG 画像を CSS で色指定して color が効かないときの対処法 | おち研

currentColor | CSS-Tricks

Cascading SVG Fill Color | CSS-Tricks

SVG fill: currentColor? · Issue #78 · csstools/sanitize.css – GitHub

How do I have an SVG image inherit colors from the HTML document? – Stack Overflow

fill: currentColor が使えるケースと使えないケース

使えるケース

• svg タグ（インライン / HTML に直接埋め込み）
• use タグで参照

使えないケース

• img タグで読み込み
• object タグで読み込み
• スタイルの url で SVG ファイルを参照：background: url(path/to/background.svg)

参考：

SVG の色を CSS 上で変えてしまう方法 | 狛ログ

SVG を use タグで使いまわす – Qiita

currentColor inheritance for SVG url – Stack Overflow

CSS 変数を使う

参考：

SVG アイコンを CSS 変数とか併せて良さげに使う | ベーシック エンジニアブログ

アニメーションで currentColor を使う

参考：

SVG Animation, fill (塗り) 色 (color) 遷移を CSS3 でね | イナヅマ TV ログ

jQuery を使って img をインライン SVG に置き換える

参考：

img src SVG changing the fill color – Stack Overflow

カラーパレット

参考：

SVG Hex Color Codes | december.com

Color units | CSS Color Module Level 3 (w3.org)

Extended color keywords | CSS Color Module Level 3 (w3.org)

SVG 1.0 color keyword names | SuikaWiki.org