ホバー上のSVGの色を変更します

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

インラインSVG

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

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

SVGシンボル/使用

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

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

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

SVG背景画像

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

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

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

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

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

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

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

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

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

以上がホバー上のSVGの色を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。