私の :hover CSS が「」で埋め込まれた SVG 要素で機能しないのはなぜですか?どうすれば修正できますか?

を使用して埋め込まれた SVG 要素のスタイル設定using :hover CSS

提供されたコードでは、:hover CSS を使用して埋め込み SVG 要素のスタイルを設定しようとしていますが、 を使用して参照されるグループ内の要素に対しては機能しません。要素。これは、SVG 仕様によれば、 による要素のクローン作成によって作成されたクローン DOM ツリーには CSS セレクターを適用できないためです。

Firefox のサポートと回避策

Firefox は、 を介して含まれる仮想要素のアドレス指定をサポートする唯一のブラウザです。ワームホール。ただし、他のブラウザはそうではありません。

回避策は、 を使用するときに、currentColor を使用して塗りつぶしまたはストロークのプロパティを持つ要素に異なる色を適用することです。要素の color プロパティはホバー時に変更されます。例:

#p0 {fill:currentColor}
#use1:hover {color:green}
#use2:hover {color:red}
#use3:hover {color:blue}

考えられる代替案

目標を達成するための代替アプローチは、JavaScript を使用してマウス ホバー イベントの SVG 要素を変更することです。これには、各 にイベント リスナーを追加することが含まれます。

適切なソリューションの選択

Firefox 互換の CSS 回避策と JavaScript の選択ベースのアプローチは、ブラウザのサポートとプロジェクトの特定の要件によって異なります。ブラウザの互換性が重要な場合は、JavaScript メソッドを使用してください。それ以外の場合は、シンプルさと実装の容易さのために CSS ソリューションを選択することもできます。

さらなる考慮事項

埋め込みオブジェクト内の特定の部分で目的のホバー効果を実現するには、次のようにします。ホバー時に各グループ内の特定の要素の属性またはスタイルを変更するには、追加の JavaScript を使用する必要がある場合があります。 JavaScript は動的要素操作の柔軟性を高め、埋め込みオブジェクト内の個々の要素をターゲットにして変更できるようにします。

以上が私の :hover CSS が「」で埋め込まれた SVG 要素で機能しないのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。