jQuery SVG, pourquoi ne puis-je pas addClass?
Je suis à l'aide de jQuery SVG. Je ne peux pas ajouter ou supprimer une classe à un objet. Quelqu'un sait mon erreur?
Le SVG:
<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
Le jQuery qui ne sera pas ajouter à la classe:
$(".jimmy").click(function() {
$(this).addClass("clicked");
});
Je sais que le SVG et jQuery sont travailler ensemble bien parce que j'ai peut cible de l'objet et de déclencher une alerte lorsqu'il est cliqué:
$(".jimmy").click(function() {
alert('Handler for .click() called.');
});
- Bon article ici: toddmotto.com/...
- Donc la question de POURQUOI ne puis-je pas utiliser le jQuery *fonctions de classe reste sans réponse... Si je peux accéder aux propriétés des éléments SVG via jQuery fonction attr, pourquoi ne peut-on pas *fonctions de classe également le faire? jQuery ne parviennent pas?!?
- Sérieusement, quelqu'un sait-il POURQUOI??
- Minuscule bibliothèque qui ajoute cette fonctionnalité pour les fichiers SVG: github.com/toddmotto/lunar
- Le "pourquoi" parce que jQuery utilise le "className" de la propriété, qui est une chaîne de propriété pour les éléments HTML, mais est un SVG Animé de la Chaîne pour les éléments SVG. Qui ne peut pas être attribué comme pour les éléments HTML. Ainsi, le code jQuery coups de tenter d'affecter la valeur.
- Comme par stackoverflow.com/a/34698009/70345 la bonne réponse est: la mise à niveau vers l'une de jQuery 1.12.0, 2.2.0, ou de 3,0; ou une version ultérieure de ces derniers.
Vous devez vous connecter pour publier un commentaire.
Modifier 2016: lire les deux prochaines réponses.
element.classList.add('newclass')
fonctionne dans les navigateurs modernesJQuery (moins de 3) ne peut pas ajouter une classe à un SVG.
.attr()
fonctionne avec SVG, donc si vous voulez dépendent de jQuery:Et si vous ne voulez pas dépendre de jQuery:
.attr("class", "oldclass")
(ou les plus lourdes.setAttribute("class", "oldclass")
) n'est pas vraiment l'équivalent du retrait denewclass
!setAttribute()
est cassé.$("#item").attr("class", "oldclass newclass");
$("#item").addClass("newClass")
je suis en train d'écrire$("#item").attr("class", $(#item).attr('class').replace('newClass','')+' newClass');
et pour$("#item").removeClass("oldClass");
je suis en train d'écrire$("#item").attr("class", $(#item).attr('class').replace('oldClass',''));
de cette façon, vous n'avez pas de duplication de classeL.circle([lat, lng], radius)._path.classList.add("circlemarkerclassname")
Il est de l'élément.classList dans l'API DOM pour les éléments HTML et SVG. Pas besoin de jQuery plugin SVG ou encore jQuery.
jQuery 3 n'a pas ce problème
L'une des modifications mentionnées sur le jQuery 3.0 révisions est:
Une solution à ce problème serait de mettre à niveau vers jQuery 3. Il fonctionne très bien:
JS:
CSS:
HTML:
Le Problème:
La raison pour laquelle le jQuery classe de fonctions de manipulation ne fonctionne pas avec les éléments SVG est parce que jQuery versions antérieures à la version 3.0 d'utiliser le
className
propriété pour ces fonctions.Extrait de jQuery
attributes/classes.js
:Il se comporte comme prévu pour les éléments HTML, mais pour les éléments SVG
className
est un peu différent. Pour un élément SVG,className
n'est pas une chaîne, mais une instance deSVGAnimatedString
.Considérons le code suivant:
JS:
CSS:
HTML:
Si vous exécutez ce code, vous verrez quelque chose comme ce qui suit dans votre développeur de la console.
Si nous étions à la fonte qui
SVGAnimatedString
objet d'une chaîne de caractères comme le fait jQuery, nous aurions[object SVGAnimatedString]
, qui est l'endroit où jQuery échoue.Comment le jQuery plugin SVG gère ce:
Le jQuery plugin SVG d'œuvres autour de ce en bidouillant les fonctions pertinentes à ajouter le support SVG.
Extrait de jQuery SVG
jquery.svgdom.js
:Cette fonction détecte si un élément est un élément SVG, et si elle est, il va utiliser la
baseVal
propriété de laSVGAnimatedString
objet, si disponible, avant de retomber sur leclass
attribut.jQuery historique de position sur la question:
jQuery répertorie actuellement cette question sur leur Ne sera pas Corrigé page. Voici les parties pertinentes.
Évidemment jQuery considérée comme le support SVG en dehors de la portée de la base jQuery, et mieux adapté pour les plugins.
Si vous avez des classes dynamiques ou ne sait pas ce cours peut être déjà appliqué cette méthode, je crois, la meilleure approche:
Basé sur les réponses ci-dessus, j'ai créé l'API suivante
Après le chargement
jquery.svg.js
vous devez charger ce fichier:http://keith-wood.name/js/jquery.svgdom.js
.Source: http://keith-wood.name/svg.html#dom
De travail exemple: http://jsfiddle.net/74RbC/99/
Il suffit d'ajouter le manque prototype du constructeur à tous les SVG nœuds:
Vous pouvez alors l'utiliser de cette façon, sans nécessiter de jQuery:
Tout le crédit va à Todd Moto.
jQuery ne prend pas en charge les classes des éléments SVG. Vous pouvez obtenir de l'élément directement
$(el).get(0)
et l'utilisationclassList
etadd /remove
. Il y a un truc avec cela aussi en ce que le premier élément SVG est en fait un DOM normal de l'objet et peut être utilisé comme tout autre élément de jQuery. Dans mon projet, j'ai créé cette pour prendre soin de ce dont j'avais besoin, mais la documentation fournie sur le Mozilla Developer Network a une cale qui peut être utilisé comme une alternative.exemple
Une alternative tout est plus difficile à utiliser D3.js comme votre sélecteur de moteur à la place. Mes projets ont des tableaux qui sont construits avec elle donc c'est aussi dans mon application. D3 correctement modifie les attributs de classe de la vanille, des éléments du DOM et des éléments SVG. Bien que l'ajout de D3 pour ce cas serait probablement exagéré.
jQuery 2.2 supporte SVG classe de manipulation de
La jQuery 2.2 et 1.12 Publié poste comprend la citation suivante:
Exemple à l'aide de jQuery 2.2.0
Il teste:
Si vous cliquez sur le petit carré, il va changer sa couleur, car les
class
attribut est ajouté /retiré.JS:
CSS:
HTML:
Voici mon assez inélégant mais code du travail qui traite des questions suivantes (sans dépendances):
classList
n'existant pas sur<svg>
éléments dans IEclassName
qui ne représentent pas laclass
attribut sur<svg>
éléments dans IEgetAttribute()
etsetAttribute()
implémentationsIl utilise
classList
si possible.Code:
Exemple d'utilisation:
className
propriété plutôt que de tenter de définir un attribut. La raison que "LTE IE7 nécessite strAttributeName être "className" lors de la configuration, l'obtention ou la suppression d'un attribut de CLASSE", c'est que les navigateurs ont une fracture de la mise en œuvre degetAttribute(x)
etsetAttribute(x)
que, tout simplement, d'obtenir ou de définir la propriété avec le nomx
, de sorte qu'il est plus facile et plus compatible pour définir la propriété directement.<svg>
élément dans une page qui est conçu pour fonctionner dans IE 7. Pour ce que ça vaut, mon code ne ajouter un attribut de classe avec succès à<svg>
éléments dans IE 7 depuis un tel élément se comporte comme n'importe quel autre élément personnalisé.Je utiliser le composant logiciel Enfichable.svg pour ajouter une classe et SVG.
http://snapsvg.io/docs/#Element.addClass
Une solution pourrait être de addClass à un conteneur de l'élément svg:
JS:
CSS:
HTML:
Inspiré par les réponses ci-dessus, en particulier par Sagar Gala, j'ai créé cette API. Vous pouvez l'utiliser si vous ne voulez pas ou ne pouvez pas mettre à niveau votre version jquery.
J'ai écrit cela dans mon projet, et ça marche... probablement;)
exemples
Ou tout simplement utiliser de la vieille école, les méthodes du DOM quand JQ a un singe dans le milieu quelque part.
Apprendre les DOM personnes. Même en 2016 du cadre-palooza il aide tout à fait régulièrement. Aussi, si jamais vous entendez quelqu'un comparer les DOM à l'assemblée, coup de pied pour moi.