svg アイコンの線や背景の色をcssで変更する

● svg アイコンの線や背景の色をcssで変更する

● A. ❌ 読み込み + 「cssの fill または stroke による色変更」 は出来ません。

残念ながらこれはできないようです。

● B. <img src=>によるsvg読み込み + 「css の filter による色変更」→ こちらはOKです。

こちらのサイト に変換したい色を入力すると、黒色から指定の色に変換する filter を生成してくれます。
svg アイコンは黒色で作成しておく必要があります。
https://codepen.io/sosuke/pen/Pjoqqp

もし 白色のアイコンの場合は

  background-color: #000;

を #fff に変更します。

<img src="icon.svg" class="icon">

<style>
.icon {
filter: invert(64%) sepia(25%) saturate(4945%) hue-rotate(168deg) brightness(93%) contrast(88%);
}
</style>

● C. インラインsvg読み込み + cssによる色変更

svg をhtml内にコードとして貼り付けて、class をつけて、 fill または stroke プロパティで色をつけます

No.2276
12/22 09:26

edit