jQuery SVG, pourquoi je ne peux pas ajouter une classe?

Question

J'utilise jQuery SVG. Je ne peux pas ajouter ou supprimer une classe à un objet. Quelqu'un connait mon erreur?

Le SVG:

 <rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
 

Le jQuery qui n'ajoutera pas la classe:

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

Je sais que le SVG et jQuery fonctionnent bien ensemble parce que je peux cibler l'objet et déclencher une alerte quand on clique dessus:

 $(".jimmy").click(function() {
    alert('Handler for .click() called.');
});
 

Answer 1

.attr() fonctionne avec SVG, donc si vous ne voulez pas dépendre d'une autre bibliothèque:

 // Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");
 

Et si vous ne voulez pas dépendre de jQuery:

 var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");
 

Answer 2

Il y a element.classList dans l'API DOM qui fonctionne à la fois pour les éléments HTML et SVG. Pas besoin de plugin jQuery SVG ou même de jQuery.

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

Answer 3

Si vous avez des classes dynamiques ou ne sais pas ce que les classes pourraient être déjà appliqué alors cette méthode que selon moi est la meilleure approche :

Answer 4

Basé sur au-dessus de réponses, j’ai créé l’API suivante

Answer 5

Après le chargement vous devez charger ce fichier : .

Source : http://keith-wood.name/svg.html#dom

Exemple : http://jsfiddle.net/74RbC/99/