Mengapa Jangan :hover Styles Berfungsi pada Elemen SVG `` dan Bagaimana Saya Boleh Mengatasi Ini?

Mengatasi Elemen SVG yang Dibenamkan dengan Penggunaan dan Gaya :hover

Memahami Masalah

Apabila cuba menggunakan :gaya tuding pada elemen SVG yang dibenamkan menggunakan tag, seseorang mungkin menghadapi kesukaran. Ini timbul daripada fakta bahawa unsur-unsur yang dirujuk melalui bukan sebahagian daripada struktur dokumen rasmi, menjadikannya mencabar untuk menanganinya secara langsung dengan pemilih CSS.

Mengapa Gaya :hover Tidak Berfungsi

Mengikut Spesifikasi Elemen Penggunaan SVG, pemilih CSS tidak boleh digunakan pada pokok DOM konseptual di mana unsur yang dirujuk berada. Ini bermakna bahawa :hover pseudoclasses tidak akan berfungsi pada elemen ini, menghalang anda daripada menggunakan gaya interaktif.

Pengecualian Firefox

Walaupun kebanyakan penyemak imbas kekurangan sokongan untuk menangani elemen "maya" yang dibenamkan melalui < use>, Firefox berdiri sebagai pengecualian. Ia membenarkan pengubahsuaian warna isian atau strok dengan menetapkan nilainya kepada 'Warna semasa' dalam elemen yang dirujuk dan mengubah sifat warna bagi elemen pada tuding.

Pendekatan Alternatif

Kaedah alternatif untuk mencapai kesan tuding pada elemen SVG terbenam melibatkan penggunaan 'currentColor'. Dengan menetapkan atribut isi atau strok bagi elemen yang dirujuk kepada 'currentColor' dan mengubah suai warna elemen pada tuding, penyemak imbas boleh mengemas kini warna semasa yang diwarisi. Teknik ini menawarkan penyelesaian, walaupun ia tidak menyediakan rangkaian penuh keupayaan penggayaan yang diberikan oleh :hover pseudoclasses.

Contoh

Pertimbangkan kod SVG berikut:

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

  <defs>
    <polygon>

Apabila anda menuding pada setiap elemen, bentuk masing-masing akan bertukar warna kepada hijau, merah atau biru berdasarkan warna yang dinyatakan dalam peraturan :hover mereka.

Atas ialah kandungan terperinci Mengapa Jangan :hover Styles Berfungsi pada Elemen SVG `` dan Bagaimana Saya Boleh Mengatasi Ini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!