:hover が SVG 要素で機能しない理由と代替手段は何ですか?

SVG USE 要素と :hover スタイル – ブラウザーのサポートの問題

< を通じて埋め込まれた SVG 要素に :hover スタイルを適用しようとすると、デフ> を使用すると、一部のブラウザで制限が発生する可能性があります。

ブラウザ サポートの制限

SVG 仕様では、概念的に複製された DOM には CSS2 セレクターを適用できないと明記されています。 によって参照される要素のツリー。これは、埋め込みオブジェクト内の特定の要素をターゲットにするために :hover を使用できないことを意味します。

Firefox の例外

Firefox は例外として際立っており、「仮想」のアドレス指定をサポートしています。 " によって含まれる要素ワームホール。ただし、他のブラウザはこの機能を共有しません。

currentColor を使用した代替アプローチ

:hover に依存する代わりに、より広くサポートされているアプローチは、参照先を設定することです。要素の塗りつぶしまたはストロークの値を currentColor に設定します。 の color プロパティを変更することで、要素にマウスを置くと、参照された要素の塗りつぶしまたはストロークの色がそれに応じて変化します。

例を次に示します:

<svg version="1.1" width="640" height="480"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    #p0 {fill:currentColor}
    #use1:hover {color:green}
    #use2:hover {color:red}
    #use3:hover {color:blue}
  </style>

  <defs>
    <polygon>

この手法を使用すると、埋め込まれた SVG の塗りつぶしまたはストロークの色を効果的に変更できます。 を使用する場合の要素要素の上にマウスを置くと、これらの要素に対する :hover の効果が模倣されます。

以上が:hover が SVG 要素で機能しない理由と代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。