SVGにはさまざまなアプリケーション方法があり、さまざまなアプリケーション方法に従って、異なる狀態(tài)（ホバー：ホバー、アクティベーション：アクティブ、フォーカス、クラス名の変更など）でSVGを変更するカラー戦略も異なります。それを別々に見てみましょう：

インラインSVG

インラインSVGは、SVGを使用するための私の個人的なお気に入りの方法です。これは、アクセスとスタイリングが簡単であるためです。

アイコンフォントの使用に慣れている場合は、簡単な色の変更が少し好きかもしれません。アイコンフォントはモノクロにやや制限されていますが、SVGはそうではありませんが、それでもアイコンフォントのモノクロを変更するのは非常に簡単です。インラインSVGを使用すると、 fillプロパティを設定できます。これにより、SVG內(nèi)のすべての要素にカスケードするか、必要に応じて各要素を個別に入力できます。

SVGシンボル/使用

いわゆるSVGスプライト図があります。<symbol></symbol>特定のアイコンが渡すことができるように要素のsvg<use></use>要素は簡単に參照されます。

外部CSSを介して塗りつぶしの色を簡単に設定できますが、いくつかのメモがあります。

• 內(nèi)部SVG要素（例：<path></path> ）それ自體はパディングなしで可能です。これにより、パディングが親svgからセットされたカスケードをすることができます<use></use>Shadow Domが作成しました。あなたが入ったら<symbol></symbol>同様の追加<path ... fill="blue"></path>外部CSSの制御を失います。
• 繰り返しますが、インラインSVGのように、SVG內(nèi)の個々の要素の充填を制御することはできません。これは、基本的にモノクロ地域にいることを意味します。これはほとんどのユースケースをカバーしていますが、まだ制限です。

SVG背景畫像

SVGは、PNG、JPG、またはその他のグラフィック形式などの背景畫像として設定できます。この時點で、基本的に塗りつぶしを変更する能力をあきらめます。 1つの可能性（特に良いとは思わない）は、グラフ標準ごとに2つのバージョンを準備し、異なる色を使用してから、それらを切り替えることです。

あなたがリソースを切り替えたくないなら、私はあなたを責めません。そのため、別の可能性は複雑なフィルターを使用することです。

適切なフィルターを調(diào)整して正しい色を取得しようとするのは難しいことです。幸いなことに、Barrett Sonntagは、フィルターの計算を支援するツールを作成しました！黒から赤への変換は、次のような奇妙な組み合わせで終わります。 invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) ;。

SVGにはobjectプロパティもあります。これは、組み込みのフォールバックメカニズムがあったため、過去に非常に簡潔でした。最近はブラウザーのサポートは非??常に優(yōu)れていますが、正直に使用したことはありません。ただし、使用している場合は、このフィルター手法を使用して、ホバリング時に色を切り替える必要がある場合があります。

背景畫像の代わりにマスクを使用します

このようにして、SVGは依然として形狀を描畫する責任がありますが、色はSVG自體ではなく、背後の背後の色（または寫真！または勾配！）から來ます。

データURLとしてのSVG背景畫像

これは上記の方法とそれほど違いはありませんが、興味深い可能性を提供します。內(nèi)部パディングに変數(shù)を使用します。 SASSを使用してURLを変數(shù)として保持する例は次のとおりです。

ネイティブCSSカスタムプロパティを使用してこれを実現(xiàn)することもできます。

以上がホバー上のSVGの色を変更しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。