Pourquoi jQuery ne manipule-t-il pas les classes SVG et comment puis-je y remédier ?

jQuery SVG : surmonter l'obstacle de la manipulation de classe

L'intégration de jQuery dans vos opérations SVG peut rationaliser le développement. Cependant, un écueil courant est l’impossibilité d’ajouter ou de supprimer des classes dans les éléments SVG. Examinons le problème et explorons les solutions.

Le problème :

Lorsque vous essayez de manipuler des classes dans un élément SVG à l'aide de jQuery, cela échoue souvent. Par exemple, considérons le code suivant :

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

Dans cet exemple, le code jQuery doit ajouter la classe « cliqué » au rectangle lorsque vous cliquez dessus. Cependant, il n’y parvient pas.

La solution :

1. Utiliser JQuery 3 ou version ultérieure :

Les versions de JQuery antérieures à 3 rencontraient des difficultés lors de l'utilisation des classes SVG. Cependant, ce problème a été résolu dans JQuery 3 et supérieur. La mise à niveau vers la dernière version de JQuery devrait résoudre le problème.

2. Utilisez Vanilla JavaScript :

Si vous préférez ne pas vous fier à JQuery, vous pouvez manipuler les classes SVG directement à l'aide de Vanilla JavaScript. La méthode classList.add() offre un moyen pratique d'y parvenir :

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

3. Tirez parti de la méthode .attr() :

Une autre option consiste à utiliser la méthode .attr(), qui est compatible avec jQuery et Vanilla JavaScript :

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

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

En utilisant Avec l'une de ces solutions, vous pouvez manipuler efficacement les classes de vos éléments SVG à l'aide de jQuery ou de JavaScript Vanilla, surmontant ainsi les limitations précédentes.

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!