[CSS]SVGアイコンの色を変更する方法

0

SVGアイコンを使用した時にSVGアイコンの色を変更する方法をサクッと変更します。

colorプロパティを使いたいところだけど・・・

CSSでSVGアイコンのサイズや色は変更することができます。

ここで、色変更と聞いたらcolorプロパティを使いたいところですよね。

でも、SVGの場合colorプロパティでは色変更ができません。代わりにfillプロパティを使って色の変更を行います。

See the Pen yjzvrd by code-school (@code-school) on CodePen.


SVGタグの方でクラス(もしくはID)の指定を忘れないようにしましょう。

 

まとめ

いかがでしたでしょうか?今回、SVGのカラーをCSSで変更する方法を紹介しました。

まとめると、

  • colorプロパティではSVGの色変更はできない!
  • SVGの色変更はfillプロパティで行う!

ですね。ぜひ参考にしてみてください。








 

関連記事



About Author

Comments are closed.