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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です