Pourquoi jQuery AddClass() ne fonctionne-t-il pas sur les éléments SVG et comment puis-je y remédier ?

Problèmes de manipulation de classes SVG avec jQuery

Dans le domaine de la manipulation SVG avec jQuery, les utilisateurs rencontrent parfois des difficultés pour ajouter ou supprimer des classes d'éléments SVG. Un scénario courant qui déclenche ce problème consiste à cibler des objets SVG avec jQuery et à tenter d'utiliser la méthode .addClass().

L'extrait de code fourni met en évidence le problème :

<rect class="jimmy"></rect>

$(".jimmy").click(function() {
    $(this).addClass("clicked");
});

Bien que l'intégration de jQuery et SVG fonctionne parfaitement pour la gestion des événements, la manipulation des classes reste un échec.

Sous-jacent Cause

La cause première réside dans la prise en charge limitée de la manipulation des classes SVG dans les versions de jQuery antérieures à la v3. Ce problème vient du fait que jQuery gère les éléments SVG différemment des éléments HTML.

Solutions

Plusieurs solutions se présentent pour résoudre ce problème :

• Adoptez jQuery v3 : jQuery v3 et supérieur ont résolu cette limitation, permettant l'ajout et la suppression transparents de classes des éléments SVG à l'aide .addClass() et .removeClass().
• Adoptez Vanilla JavaScript : les navigateurs modernes offrent une prise en charge native de la manipulation de classe dans les éléments SVG. L'exploitation des méthodes classList.add() et classList.remove() fournit une alternative fiable à jQuery.
• Exploitez la méthode .attr() de jQuery : Si vous préférez vous en tenir à jQuery, pensez en utilisant la méthode .attr() pour modifier l'attribut de classe directement.

// Add class using .attr()
$("#item").attr("class", "oldclass newclass");

// Remove class using .attr()
$("#item").attr("class", "oldclass");

• Adoptez le JavaScript Vanilla avec .setAttribute() : Vous pouvez également utiliser le JavaScript Vanilla pour manipuler l'attribut de classe.

// Add class using .setAttribute()
var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass");

// Remove class using .setAttribute()
element.setAttribute("class", "oldclass");

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!