ベストアンサー
プロジェクトでSVGを使用/含めるにはさまざまな方法があります。どちらの方法に応じて、さまざまな状態または条件でそのSVGの色を変更するための戦術
- インラインSVG-SVGコードを直接埋め込みます。
HTML：これはこのXMLコードによりSVG画像として取得したものです
CSS：Fillプロパティを使用してSVGの色を変更できます。これは、HTMLコードを使用して作成されるため、作成されたパスSVGの色を変更する必要があります。
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2。 SVGシンボル/使用-SVGコードのファイルを埋め込み、USEHTMLタグを使用してそこからフェッチします
HTML：これは、SVG画像を他のファイルからエクスポートする方法です。 HTMLタグを使用します。
CSS：最初のタグと同じように、このテクニックは、SVG画像が数十あり、HTMLページを混雑させたくない場合に使用されます。そのため、これを1つのファイルにエクスポートして、そこからフェッチする必要があります。
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3。 SVG背景画像-他のグラフィック形式と同じように画像を設定します。
これは、2つの画像を呼び出す必要があるだけでなく、選択した状態に応じて必要な条件を設定することもできます。
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4。 CSSフィルタープロパティの使用-ただし、あまり推奨されません
別のブラウザーでのサポート動作ではないため、推奨されません。
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
ありがとうございます。うまくいく場合は、賛成してください。
学習をお楽しみください!!