:hover スタイルが SVG ` 要素で機能しない理由と、これを回避するにはどうすればよいですか?

Use および :hover スタイルを使用して埋め込まれた SVG 要素に対処する

問題を理解する

使用して埋め込まれた SVG 要素に :hover スタイルを適用しようとする場合タグを付けると、困難に遭遇する可能性があります。これは、 を通じて参照される要素が参照されるという事実から生じます。は正式なドキュメント構造の一部ではないため、CSS セレクターで直接対処するのは困難です。

:hover スタイルが機能しない理由

SVG 使用要素仕様によると、CSS セレクター参照される要素が存在する概念 DOM ツリーには適用できません。これは、:hover 疑似クラスがこれらの要素に対して機能しないことを意味し、インタラクティブ スタイルを適用できなくなります。

Firefox の例外

一方、ほとんどのブラウザは、< 経由で埋め込まれた「仮想」要素のアドレス指定をサポートしていません。 use> の場合、Firefox は例外です。参照される要素の 'currentColor' に値を設定し、 の color プロパティを変更することで、塗りつぶしまたはストロークの色の変更が可能になります。

代替アプローチ

埋め込まれた SVG 要素にホバー効果を実現する代替方法には、「currentColor」の利用が含まれます。参照される要素の塗りつぶし属性またはストローク属性を「currentColor」に設定し、 の色を変更します。要素にカーソルを合わせると、ブラウザーは継承された現在の色を更新できます。この手法は、:hover 疑似クラスによって提供されるスタイル機能の全範囲を提供するわけではありませんが、回避策を提供します。

例

次の SVG コードを考えてみましょう:

<svg>
  <style>
    #p0 { fill: currentColor; }
    #use1:hover { color: green; }
    #use2:hover { color: red; }
    #use3:hover { color: blue; }
  </style>

  <defs>
    <polygon>

それぞれの の上にカーソルを置くと、要素のそれぞれの形状は、:hover ルールで指定された色に基づいて、緑、赤、または青に色が変わります。

以上が:hover スタイルが SVG ` 要素で機能しない理由と、これを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。