【CSS】svgタグにcolorで色を指定する

スポンサーリンク

svgタグにfillではなくcolorで色を指定

svgタグに色指定する場合、通常は専用のfillというプロパティで色を指定しますが、文字色のようにcolorで色指定できるようにするには下記のように指定します。

svg {
  fill: currentColor;
}

currentColorには、svgタグの親要素に指定されているcolorの値が入ります。これでいちいちfillプロパティを追加することなく色の適用ができますね。

ちなみにReactのstyle等では下のように文字列でcurrentColorを指定します。

<svg style={{ fill: 'currentColor' }} />

未経験、異業種からIT業界に転身。フロントエンジニア。主にJavascript(React.js)をつかったWEBアプリ開発にたずさわる。
お仕事のご依頼はこちらから → genpsp10@gmail.com

psp7をフォロー
プログラミング
スポンサーリンク
psp7をフォロー
ハトらぼ

コメント