Mengapa jQuery Tidak Memanipulasi Kelas SVG, dan Bagaimana Saya Boleh Membetulkannya?

jQuery SVG: Mengatasi Halangan Manipulasi Kelas

Menggabungkan jQuery ke dalam operasi SVG anda boleh menyelaraskan pembangunan. Walau bagaimanapun, perangkap biasa yang dihadapi ialah ketidakupayaan untuk menambah atau mengalih keluar kelas daripada elemen SVG. Mari kita mendalami isu ini dan meneroka penyelesaian.

Masalahnya:

Apabila cuba memanipulasi kelas dalam elemen SVG menggunakan jQuery, ia sering gagal. Sebagai contoh, pertimbangkan kod berikut:

<svg>
  <rect></rect></svg>

Dalam contoh ini, kod jQuery harus menambah kelas "diklik" pada segi empat tepat apabila diklik. Walau bagaimanapun, ia gagal berbuat demikian.

Penyelesaian:

1. Gunakan JQuery 3 atau Kemudian:

Versi JQuery sebelum 3 mengalami kesukaran apabila bekerja dengan kelas SVG. Walau bagaimanapun, isu ini telah diselesaikan dalam JQuery 3 dan ke atas. Menaik taraf kepada versi JQuery terkini sepatutnya menyelesaikan masalah.

2. Gunakan JavaScript Vanila:

Jika anda memilih untuk tidak bergantung pada JQuery, anda boleh memanipulasi kelas SVG secara langsung menggunakan JavaScript vanila. Kaedah classList.add() menawarkan cara yang mudah untuk mencapai ini:

var element = document.getElementById("p5");
element.classList.add("clicked");

3. Manfaatkan Kaedah .attr():

Pilihan lain ialah menggunakan kaedah .attr(), yang serasi dengan JavaScript jQuery dan vanila:

// jQuery
$("#p5").attr("class", "clicked");

// Vanilla JavaScript
element.setAttribute("class", "clicked");

Dengan menggunakan salah satu daripada penyelesaian ini, anda boleh memanipulasi kelas dengan berkesan dalam elemen SVG anda menggunakan jQuery atau JavaScript vanila, mengatasi yang sebelumnya had.

Atas ialah kandungan terperinci Mengapa jQuery Tidak Memanipulasi Kelas SVG, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!