Ich benutze jQuery SVG. Ich kann einem Objekt keine Klasse hinzufügen oder entfernen. Kennt jemand meinen Fehler?
Die SVG:
<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
Die jQuery, die die Klasse nicht hinzufügt:
$(".jimmy").click(function() {
$(this).addClass("clicked");
});
Ich weiß , dass die SVG und jQuery arbeiten zusammen in Ordnung , weil ich kann das Objekt zielen und einen Alarm ausgelöst , wenn es angeklickt wird :
$(".jimmy").click(function() {
alert('Handler for .click() called.');
});
javascript
jquery
css
svg
jquery-svg
Don P.
quelle
quelle
Antworten:
Edit 2016: Lesen Sie die nächsten beiden Antworten.
element.classList.add('newclass')
funktioniert in modernen BrowsernJQuery (weniger als 3) kann einer SVG keine Klasse hinzufügen.
.attr()
funktioniert mit SVG. Wenn Sie sich also auf jQuery verlassen möchten:Und wenn Sie sich nicht auf jQuery verlassen möchten:
quelle
.attr("class", "oldclass")
(oder umso umständlicher.setAttribute("class", "oldclass")
) ist wirklich nicht gleichbedeutend mit Entfernennewclass
!In der DOM-API befindet sich element.classList, das sowohl für HTML- als auch für SVG-Elemente funktioniert. Kein jQuery SVG Plugin oder sogar jQuery erforderlich.
quelle
jQuery 3 hat dieses Problem nicht
Eine der in den jQuery 3.0-Revisionen aufgeführten Änderungen ist:
Eine Lösung für dieses Problem wäre ein Upgrade auf jQuery 3. Es funktioniert hervorragend:
Das Problem:
Der Grund, warum die Manipulationsfunktionen der jQuery-Klasse nicht mit den SVG-Elementen funktionieren, liegt darin, dass jQuery-Versionen vor 3.0 die
className
Eigenschaft für diese Funktionen verwenden.Auszug aus jQuery
attributes/classes.js
:Dies verhält sich für HTML-Elemente wie erwartet, für SVG-Elemente
className
jedoch etwas anders. Ist für ein SVG-ElementclassName
keine Zeichenfolge, sondern eine Instanz vonSVGAnimatedString
.Betrachten Sie den folgenden Code:
Wenn Sie diesen Code ausführen, wird in Ihrer Entwicklerkonsole Folgendes angezeigt.
Wenn wir dieses
SVGAnimatedString
Objekt wie jQuery in einen String umwandeln würden, hätten wir[object SVGAnimatedString]
, wo jQuery fehlschlägt.Wie das jQuery SVG-Plugin damit umgeht:
Das jQuery SVG-Plugin umgeht dies, indem es die relevanten Funktionen patcht, um SVG-Unterstützung hinzuzufügen.
Auszug aus jQuery SVG
jquery.svgdom.js
:Diese Funktion erkennt, ob ein Element ein SVG-Element ist, und verwendet, falls verfügbar, die
baseVal
Eigenschaft desSVGAnimatedString
Objekts, falls verfügbar, bevor auf dasclass
Attribut zurückgegriffen wird.jQuerys historische Haltung zu diesem Thema:
jQuery listet dieses Problem derzeit auf der Seite " Nicht behoben " auf. Hier sind die relevanten Teile.
Offensichtlich hat jQuery die vollständige SVG-Unterstützung außerhalb des Bereichs des jQuery-Kerns in Betracht gezogen und ist besser für Plugins geeignet.
quelle
Wenn Sie dynamische Klassen haben oder nicht wissen, welche Klassen bereits angewendet werden könnten, ist diese Methode meiner Meinung nach der beste Ansatz:
quelle
Basierend auf den obigen Antworten habe ich die folgende API erstellt
quelle
Nach dem Laden
jquery.svg.js
müssen Sie diese Datei laden :http://keith-wood.name/js/jquery.svgdom.js
.Quelle: http://keith-wood.name/svg.html#dom
Arbeitsbeispiel: http://jsfiddle.net/74RbC/99/
quelle
Fügen Sie einfach den fehlenden Prototypkonstruktor zu allen SVG-Knoten hinzu:
Sie können es dann auf diese Weise verwenden, ohne dass jQuery erforderlich ist:
Alle Kredite gehen an Todd Moto .
quelle
jQuery unterstützt die Klassen von SVG-Elementen nicht. Sie können das Element direkt
$(el).get(0)
abrufenclassList
und und verwendenadd / remove
. Dies hat auch den Trick, dass das oberste SVG-Element tatsächlich ein normales DOM-Objekt ist und wie jedes andere Element in jQuery verwendet werden kann. In meinem Projekt habe ich dies erstellt, um mich um das zu kümmern, was ich brauchte, aber die Dokumentation im Mozilla Developer Network enthält eine Unterlegscheibe, die als Alternative verwendet werden kann.Beispiel
Eine härtere Alternative ist die Verwendung von D3.js als Selector-Engine. Meine Projekte haben Diagramme, die damit erstellt wurden, sodass sie auch in meinem App-Bereich enthalten sind. D3 ändert die Klassenattribute von Vanille-DOM-Elementen und SVG-Elementen korrekt. Das Hinzufügen von D3 für genau diesen Fall wäre wahrscheinlich übertrieben.
quelle
jQuery 2.2 unterstützt die Manipulation von SVG-Klassen
Der veröffentlichte Beitrag zu jQuery 2.2 und 1.12 enthält das folgende Zitat:
Beispiel mit jQuery 2.2.0
Es testet:
Wenn Sie auf dieses kleine Quadrat klicken, ändert es seine Farbe, da das
class
Attribut hinzugefügt / entfernt wird.quelle
Hier ist mein eher uneleganter, aber funktionierender Code, der sich mit den folgenden Problemen befasst (ohne Abhängigkeiten):
classList
Nicht vorhanden für<svg>
Elemente im IEclassName
Nicht dasclass
Attribut für<svg>
Elemente im IE darstellengetAttribute()
undsetAttribute()
ImplementierungenEs verwendet
classList
wo möglich.Code:
Anwendungsbeispiel:
quelle
className
Eigenschaft verwendet wird, anstatt zu versuchen, ein Attribut festzulegen . Der Grund dafür, dass "LTE IE7 beim Festlegen, Abrufen oder Entfernen eines CLASS-Attributs erfordert, dass strAttributeName" className "ist, liegt darin, dass diese Browser eine fehlerhafte Implementierung von habengetAttribute(x)
undsetAttribute(x)
die Eigenschaft einfach mit name abrufen oder festlegenx
, sodass sie einfacher und kompatibler ist um die Eigenschaft direkt festzulegen.<svg>
. Daher bin ich mir nicht sicher, was Sie erreichen möchten, wenn Sie ein Element in eine Seite aufnehmen, die für IE 7 geeignet ist. Für das, was es wert ist, meinen Code Fügt<svg>
Elementen in IE 7 erfolgreich ein Klassenattribut hinzu, da sich ein solches Element wie jedes andere benutzerdefinierte Element verhält.Ich benutze Snap.svg, um eine Klasse zu und SVG hinzuzufügen.
http://snapsvg.io/docs/#Element.addClass
quelle
Eine Problemumgehung könnte darin bestehen, einem Container des svg-Elements eine Klasse hinzuzufügen:
quelle
Ich habe das in meinem Projekt geschrieben und es funktioniert ... wahrscheinlich;)
Beispiele
quelle
Inspiriert von den obigen Antworten, insbesondere von Sagar Gala, habe ich diese API erstellt . Sie können es verwenden, wenn Sie Ihre jquery-Version nicht aktualisieren möchten oder können.
quelle
Oder verwenden Sie einfach DOM-Methoden der alten Schule, wenn JQ irgendwo einen Affen in der Mitte hat.
Lerne die DOM-Leute. Auch im Framework-Palooza 2016 hilft es ganz regelmäßig. Wenn Sie jemals jemanden hören, der das DOM mit der Montage vergleicht, treten Sie ihn für mich.
quelle