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.');
});

Edit 2016: Lesen Sie die nächsten beiden Antworten.

• JQuery 3 behebt das zugrunde liegende Problem
• Vanilla JS: element.classList.add('newclass')funktioniert in modernen Browsern

JQuery (weniger als 3) kann einer SVG keine Klasse hinzufügen.

.attr() funktioniert mit SVG. Wenn Sie sich also auf jQuery verlassen möchten:

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

Und wenn Sie sich nicht auf jQuery verlassen möchten:

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

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.

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

jQuery 3 hat dieses Problem nicht

Eine der in den jQuery 3.0-Revisionen aufgeführten Änderungen ist:

SVG-Klassenmanipulation hinzufügen ( # 2199 , 20aaed3 )

Eine Lösung für dieses Problem wäre ein Upgrade auf jQuery 3. Es funktioniert hervorragend:

var flip = true;
setInterval(function() {
    // Could use toggleClass, but demonstrating addClass.
    if (flip) {
        $('svg circle').addClass('green');
    }
    else {
        $('svg circle').removeClass('green');
    }
    flip = !flip;
}, 1000);

svg circle {
    fill: red;
    stroke: black;
    stroke-width: 5;
}
svg circle.green {
    fill: green;
}

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<svg>
    <circle cx="50" cy="50" r="25" />
</svg>

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 classNameEigenschaft für diese Funktionen verwenden.

Auszug aus jQuery attributes/classes.js:

cur = elem.nodeType === 1 && ( elem.className ?
    ( " " + elem.className + " " ).replace( rclass, " " ) :
    " "
);

Dies verhält sich für HTML-Elemente wie erwartet, für SVG-Elemente classNamejedoch etwas anders. Ist für ein SVG-Element classNamekeine Zeichenfolge, sondern eine Instanz von SVGAnimatedString.

Betrachten Sie den folgenden Code:

var test_div = document.getElementById('test-div');
var test_svg = document.getElementById('test-svg');
console.log(test_div.className);
console.log(test_svg.className);

#test-div {
    width: 200px;
    height: 50px;
    background: blue;
}

<div class="test div" id="test-div"></div>

<svg width="200" height="50" viewBox="0 0 200 50">
  <rect width="200" height="50" fill="green" class="test svg" id="test-svg" />
</svg>

Wenn Sie diesen Code ausführen, wird in Ihrer Entwicklerkonsole Folgendes angezeigt.

test div
SVGAnimatedString { baseVal="test svg",  animVal="test svg"}

Wenn wir dieses SVGAnimatedStringObjekt 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:

function getClassNames(elem) {
    return (!$.svg.isSVGElem(elem) ? elem.className :
        (elem.className ? elem.className.baseVal : elem.getAttribute('class'))) || '';
}

Diese Funktion erkennt, ob ein Element ein SVG-Element ist, und verwendet, falls verfügbar, die baseValEigenschaft des SVGAnimatedStringObjekts, falls verfügbar, bevor auf das classAttribut 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.

Fehler bei SVG / VML- oder Namespaced-Elementen

jQuery ist in erster Linie eine Bibliothek für das HTML-DOM, daher liegen die meisten Probleme im Zusammenhang mit SVG / VML-Dokumenten oder Elementen mit Namespace außerhalb des Gültigkeitsbereichs. Wir versuchen, Probleme zu beheben, die in HTML-Dokumenten "durchbluten", z. B. Ereignisse, die aus SVG heraussprudeln.

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.

Wenn Sie dynamische Klassen haben oder nicht wissen, welche Klassen bereits angewendet werden könnten, ist diese Methode meiner Meinung nach der beste Ansatz:

// addClass
$('path').attr('class', function(index, classNames) {
    return classNames + ' class-name';
});

// removeClass
$('path').attr('class', function(index, classNames) {
    return classNames.replace('class-name', '');
});

Basierend auf den obigen Antworten habe ich die folgende API erstellt

/*
 * .addClassSVG(className)
 * Adds the specified class(es) to each of the set of matched SVG elements.
 */
$.fn.addClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        return ((existingClassNames !== undefined) ? (existingClassNames + ' ') : '') + className;
    });
    return this;
};

/*
 * .removeClassSVG(className)
 * Removes the specified class to each of the set of matched SVG elements.
 */
$.fn.removeClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        var re = new RegExp('\\b' + className + '\\b', 'g');
        return existingClassNames.replace(re, '');
    });
    return this;
};

Nach dem Laden jquery.svg.jsmü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/

Fügen Sie einfach den fehlenden Prototypkonstruktor zu allen SVG-Knoten hinzu:

SVGElement.prototype.hasClass = function (className) {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.getAttribute('class'));
};

SVGElement.prototype.addClass = function (className) { 
  if (!this.hasClass(className)) {
    this.setAttribute('class', this.getAttribute('class') + ' ' + className);
  }
};

SVGElement.prototype.removeClass = function (className) {
  var removedClass = this.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
  if (this.hasClass(className)) {
    this.setAttribute('class', removedClass);
  }
};

Sie können es dann auf diese Weise verwenden, ohne dass jQuery erforderlich ist:

this.addClass('clicked');

this.removeClass('clicked');

Alle Kredite gehen an Todd Moto .

jQuery unterstützt die Klassen von SVG-Elementen nicht. Sie können das Element direkt $(el).get(0)abrufen classListund und verwenden add / 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

function addRemoveClass(jqEl, className, addOrRemove) 
{
  var classAttr = jqEl.attr('class');
  if (!addOrRemove) {
    classAttr = classAttr.replace(new RegExp('\\s?' + className), '');
    jqEl.attr('class', classAttr);
  } else {
    classAttr = classAttr + (classAttr.length === 0 ? '' : ' ') + className;
    jqEl.attr('class', classAttr);
  }
}

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.

d3.select(el).classed('myclass', true);

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:

Während jQuery eine HTML-Bibliothek ist, waren wir uns einig, dass die Klassenunterstützung für SVG-Elemente nützlich sein könnte. Benutzer können jetzt die Methoden .addClass () , .removeClass () , .toggleClass () und .hasClass () in SVG aufrufen . jQuery ändert jetzt das Klassenattribut und nicht die className-Eigenschaft . Dadurch können die Klassenmethoden auch in allgemeinen XML-Dokumenten verwendet werden. Denken Sie daran, dass viele andere Dinge mit SVG nicht funktionieren. Wir empfehlen dennoch, eine Bibliothek zu verwenden, die SVG gewidmet ist, wenn Sie etwas anderes als Klassenmanipulation benötigen.

Beispiel mit jQuery 2.2.0

Es testet:

• .addClass ()
• .removeClass ()
• .hasClass ()

Wenn Sie auf dieses kleine Quadrat klicken, ändert es seine Farbe, da das classAttribut hinzugefügt / entfernt wird.

$("#x").click(function() {
    if ( $(this).hasClass("clicked") ) {
        $(this).removeClass("clicked");
    } else {
        $(this).addClass("clicked");
    }
});

.clicked {
    fill: red !important;  
}

<html>

<head>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
</head>

<body>
    <svg width="80" height="80">
        <rect id="x" width="80" height="80" style="fill:rgb(0,0,255)" />
    </svg>
</body>

</html>

Hier ist mein eher uneleganter, aber funktionierender Code, der sich mit den folgenden Problemen befasst (ohne Abhängigkeiten):

• classListNicht vorhanden für <svg>Elemente im IE
• classNameNicht das classAttribut für <svg>Elemente im IE darstellen
• Alter IE ist kaputt getAttribute()und setAttribute()Implementierungen

Es verwendet classListwo möglich.

Code:

var classNameContainsClass = function(fullClassName, className) {
    return !!fullClassName &&
           new RegExp("(?:^|\\s)" + className + "(?:\\s|$)").test(fullClassName);
};

var hasClass = function(el, className) {
    if (el.nodeType !== 1) {
        return false;
    }
    if (typeof el.classList == "object") {
        return (el.nodeType == 1) && el.classList.contains(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ? el.className : el.getAttribute("class");
        return classNameContainsClass(elClass, className);
    }
};

var addClass = function(el, className) {
    if (el.nodeType !== 1) {
        return;
    }
    if (typeof el.classList == "object") {
        el.classList.add(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ?
            el.className : el.getAttribute("class");
        if (elClass) {
            if (!classNameContainsClass(elClass, className)) {
                elClass += " " + className;
            }
        } else {
            elClass = className;
        }
        if (classNameSupported) {
            el.className = elClass;
        } else {
            el.setAttribute("class", elClass);
        }
    }
};

var removeClass = (function() {
    function replacer(matched, whiteSpaceBefore, whiteSpaceAfter) {
        return (whiteSpaceBefore && whiteSpaceAfter) ? " " : "";
    }

    return function(el, className) {
        if (el.nodeType !== 1) {
            return;
        }
        if (typeof el.classList == "object") {
            el.classList.remove(className);
        } else {
            var classNameSupported = (typeof el.className == "string");
            var elClass = classNameSupported ?
                el.className : el.getAttribute("class");
            elClass = elClass.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), replacer);
            if (classNameSupported) {
                el.className = elClass;
            } else {
                el.setAttribute("class", elClass);
            }
        }
    }; //added semicolon here
})();

Anwendungsbeispiel:

var el = document.getElementById("someId");
if (hasClass(el, "someClass")) {
    removeClass(el, "someClass");
}
addClass(el, "someOtherClass");

Ich benutze Snap.svg, um eine Klasse zu und SVG hinzuzufügen.

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

http://snapsvg.io/docs/#Element.addClass

Eine Problemumgehung könnte darin bestehen, einem Container des svg-Elements eine Klasse hinzuzufügen:

$('.svg-container').addClass('svg-red');

.svg-red svg circle{
    fill: #ED3F32;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="svg-container">
  <svg height="40" width="40">
      <circle cx="20" cy="20" r="20"/>
  </svg>
</div>

Ich habe das in meinem Projekt geschrieben und es funktioniert ... wahrscheinlich;)

$.fn.addSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        if(attr.indexOf(className) < 0) {
            $(this).attr('class', attr+' '+className+ ' ')
        }
    })
};    

$.fn.removeSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        attr = attr.replace(className , ' ')
        $(this).attr('class' , attr)
    })
};    

Beispiele

$('path').addSvgClass('fillWithOrange')
$('path').removeSvgClass('fillWithOrange')

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.

Oder verwenden Sie einfach DOM-Methoden der alten Schule, wenn JQ irgendwo einen Affen in der Mitte hat.

var myElement = $('#my_element')[0];
var myElClass = myElement.getAttribute('class').split(/\s+/g);
//splits class into an array based on 1+ white space characters

myElClass.push('new_class');

myElement.setAttribute('class', myElClass.join(' '));

//$(myElement) to return to JQ wrapper-land

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.