CSS :hover スタイルを SVG ` 要素に適用できますか?

SVG USE 要素に :hover スタイルを適用できますか?

内に埋め込まれた SVG 要素のスタイル設定CSS :hover 疑似クラスを使用するセクションは難しい場合があります。 DOM 内にこれらの要素が存在するにもかかわらず、SVG の構造により、これらの要素を直接ターゲットにすることはできません。

問題の理解:

SVG 仕様では、クローン作成が 内の参照要素の数DOM ツリーのセクションには、CSS プロパティやカスケード値は含まれません。これは、CSS2 のセレクターを参照要素内のクローン要素に適用できないことを意味し、これらの要素を :hover スタイルで直接ターゲットにすることができなくなります。

Firefox での部分サポート:

ほとんどのブラウザは、 内の仮想要素の直接のターゲット設定をサポートしていません。参考として、Firefox は部分的なサポートを提供しています。 currentColor を参照要素に割り当て、 の color プロパティを変更することで、塗りつぶしまたはストロークの色を変更できます。

制限付きブラウザ サポート:

ただし、このアプローチには互換性が限られているため、特に Firefox をターゲットとする場合にのみ使用してください。ブラウザ間の互換性を確保するには、他の方法を使用する必要があります。

代替解決策:

この問題に対処する 1 つの方法は、JavaScript を使用して実行時に SVG DOM を操作することです。ホバー スタイルを仮想要素に動的に適用します。このアプローチは柔軟性を高めますが、追加のスクリプトが必要であり、すべてのシナリオに適しているとは限りません。

別の解決策には、 を利用することが含まれます。要素とマスクの組み合わせ。 でクリップ パスを定義することで、 セクションに適用されるマスクにリンクします。要素を使用すると、仮想要素を直接ターゲットにすることなく、疑似ホバー効果を実現できます。この方法は、ブラウザーのサポートを強化し、SVG の原則とよりインラインです。

結論:

を使用して、埋め込み SVG 要素に :hover 疑似クラスを適用します。タグは、SVG 仕様の制限により単純ではありません。 Firefox では部分的なサポートが存在しますが、ブラウザ間の互換性のために、JavaScript 操作や などの代替アプローチが必要です。マスキングを考慮する必要があります。

以上がCSS :hover スタイルを SVG ` 要素に適用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。