289

मैं jQuery SVG का उपयोग कर रहा हूँ। मैं किसी वर्ग को किसी वस्तु में नहीं जोड़ सकता या हटा नहीं सकता। किसी को मेरी गलती पता है?

एसवीजी:

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

JQuery जो वर्ग को नहीं जोड़ेगा:

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

मुझे पता है कि SVG और jQuery एक साथ ठीक काम कर रहे हैं क्योंकि मैं ऑब्जेक्ट को लक्षित कर सकता हूं और जब इसे क्लिक किया जाता है तो अलर्ट फायर कर सकता है:

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

— डॉन पी
स्रोत

4

यहाँ अच्छा लेख: toddmotto.com/-

— क्रिस

8

तो WHY का वास्तविक प्रश्न क्या मैं jQuery का उपयोग नहीं कर सकता * वर्ग फ़ंक्शंस अनुत्तरित रहते हैं ... यदि मैं SVG तत्वों के गुणों को jQuery अटर फ़ंक्शन के माध्यम से एक्सेस कर सकता हूं, तो * क्लास फ़ंक्शंस भी ऐसा क्यों नहीं कर सकते? jQuery विफल?

— रयान ग्रिग्स

2

गंभीरता से, किसी को पता है क्यों ??

— बेन वाइल्ड

छोटे पुस्तकालय जो SVG फ़ाइलों के लिए इस कार्यक्षमता को जोड़ता है: github.com/toddmotto/lunar

— चक ले बट

6

"क्यों" है क्योंकि jQuery "क्लासनेम" संपत्ति का उपयोग करता है, जो HTML तत्वों के लिए एक स्ट्रिंग संपत्ति है, लेकिन एसवीजी तत्वों के लिए एक एसवीजी एनिमेटेड स्ट्रिंग है। जिसे HTML तत्वों के लिए पसंद नहीं किया जा सकता है। इस प्रकार, jQuery कोड मूल्य निर्दिष्ट करने की कोशिश कर रहा है।

— जॉन वाट

426

संपादित करें 2016: अगले दो उत्तर पढ़ें

JQuery 3 अंतर्निहित समस्या को ठीक करता है
वेनिला जेएस: element.classList.add('newclass')आधुनिक ब्राउज़रों में काम करता है

JQuery (3 से कम) एक SVG में एक क्लास नहीं जोड़ सकता।

.attr() SVG के साथ काम करता है, इसलिए यदि आप jQuery पर निर्भर रहना चाहते हैं:

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

और अगर आप jQuery पर निर्भर नहीं होना चाहते हैं:

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

— forresto
स्रोत

- forresto सुझाव के समर्थन में discusscode.blogspot.in/2012/08/...

— HelloWorld

उत्तम। इसका उत्तर होना चाहिए। हालांकि REAL उत्तर, डिफ़ॉल्ट रूप से इसे शामिल करने के लिए jquery के लिए है, कम से कम एक सेटिंग या कुछ और के रूप में।

— AwokeKnowing

2

.attr("class", "oldclass")(या अधिक बोझिल .setAttribute("class", "oldclass")) वास्तव में हटाने के बराबर नहीं है newclass!

— टॉम

शानदार उत्तर (और v.nice तकनीक) ... लेकिन क्या यह सवाल को संपादित करने के लिए एक विचार होगा ताकि यह बताते हुए कि jquery एक SVG में एक वर्ग नहीं जोड़ सके (यदि ऐसा हो तो ... जैसा लगता है। )?

— बायरन्यासगुर

1

बस एक परिशिष्ट: मैंने कोशिश की और JQuery 3 ने समस्या को ठीक नहीं किया।

— जोआओ अरुडा

76

नहीं है element.classList डोम एपीआई में है कि दोनों HTML और एसवीजी तत्वों के लिए काम करता है। JQuery SVG प्लगइन या jQuery के लिए कोई ज़रूरत नहीं है।

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

— टॉमस मिकुला
स्रोत

3

मैंने इसका परीक्षण किया, और .classList कम से कम क्रोम में, एसवीजी उप-तत्वों के लिए अपरिभाषित प्रतीत होता है।

— क्रिस जेनेस

3

क्रोम में मेरे लिए काम करता है। मुझे HTML में SVG एम्बेड किया गया है, इसलिए मेरी दस्तावेज़ संरचना कुछ इस तरह दिखती है: <html> <svg> <Circle class = "jimmy" ...> </ svg> </ html>

— टॉमस मिकुला

1

मैंने इसका उपयोग <g> एसवीजी तत्व में वर्ग जोड़ने के लिए किया है, क्रोम में ठीक काम करता है।

— राचेल उई

20

IE SVG Elements पर .classList और API को लागू नहीं करता है। देखें caniuse.com/#feat=classlist और "ज्ञात समस्याओं" सूची। जिसमें WebKit ब्राउज़र का भी उल्लेख है।

— शेनमे

9

और जैसा कि समय पर चला जाता है, इस सवाल का जवाब भी हो जाता है और अधिक सही (और सर्वश्रेष्ठ उत्तर)

— Gerrat

69

jQuery 3 में यह समस्या नहीं है

JQuery 3.0 संशोधन में सूचीबद्ध परिवर्तनों में से एक है:

SVG वर्ग जोड़-तोड़ जोड़ें ( # 2199 , 20aa3 )

इस समस्या का एक समाधान jQuery 3 में अपग्रेड करना होगा। यह बहुत अच्छा काम करता है:

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>

स्निपेट का विस्तार करें

समस्या:

JQuery वर्ग मैनिपुलेशन फ़ंक्शंस एसवीजी तत्वों के साथ काम नहीं करने का कारण है क्योंकि 3.0 से पहले के jQuery संस्करण classNameइन कार्यों के लिए संपत्ति का उपयोग करते हैं।

JQuery के अंश `attributes/classes.js`:

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

यह HTML तत्वों के लिए अपेक्षित व्यवहार करता है, लेकिन SVG तत्वों के classNameलिए थोड़ा अलग है। एसवीजी तत्व के लिए, classNameएक स्ट्रिंग नहीं है, लेकिन इसका एक उदाहरण है SVGAnimatedString।

निम्नलिखित कोड पर विचार करें:

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>

स्निपेट का विस्तार करें

यदि आप इस कोड को चलाते हैं तो आपको अपने डेवलपर कंसोल में निम्नलिखित कुछ दिखाई देगा।

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

अगर हम उस SVGAnimatedStringऑब्जेक्ट को एक स्ट्रिंग में डालना चाहते थे जैसा कि jQuery करता है, तो हमारे पास होगा [object SVGAnimatedString], जो कि jQuery विफल रहता है।

JQuery SVG प्लगइन इसे कैसे संभालता है:

JQuery SVG प्लगइन एसवीजी समर्थन जोड़ने के लिए संबंधित कार्यों को पैच करके इसके चारों ओर काम करता है।

JQuery के SVG के कुछ अंश `jquery.svgdom.js`:

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

यह फ़ंक्शन पता लगाएगा कि क्या कोई तत्व एसवीजी तत्व है, और यदि यह है तो यह baseValगुण के गुण का उपयोग करेगा SVGAnimatedStringयदि उपलब्ध है, classविशेषता पर वापस गिरने से पहले ।

इस मुद्दे पर jQuery का ऐतिहासिक रुख:

jQuery वर्तमान में इस समस्या को उनके W Fix Fix पेज पर सूचीबद्ध करता है । यहाँ प्रासंगिक भागों है।

एसवीजी / वीएमएल या नामांकित तत्व कीड़े

jQuery मुख्य रूप से HTML DOM के लिए एक लाइब्रेरी है, इसलिए SVG / VML दस्तावेज़ या नामांकित तत्वों से संबंधित अधिकांश समस्याएं गुंजाइश से बाहर हैं। हम उन समस्याओं को संबोधित करने की कोशिश करते हैं जो HTML दस्तावेजों में "ब्लीड" के माध्यम से होती हैं, जैसे कि एसवीजी से बाहर होने वाली घटनाएं।

जाहिर तौर पर jQuery को jQuery कोर के दायरे से बाहर पूर्ण SVG समर्थन माना जाता है, और प्लगइन्स के लिए बेहतर अनुकूल है।

— अलेक्जेंडर ओ'मारा
स्रोत

38

यदि आपके पास गतिशील कक्षाएं हैं या नहीं जानते कि कौन सी कक्षाएं पहले ही लागू की जा सकती हैं तो मेरा मानना है कि यह तरीका सबसे अच्छा तरीका है:

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

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

— एनएवी
स्रोत

1

यह मेरे लिए एक जीवनसाथी था क्योंकि मुझे चीजों को प्राप्त करने के लिए बहुत सारे एसवीजी-तत्वों को बदलने की जरूरत थी। +999 मुझ से :)

— कार्ल

यह विश्वास करना मुश्किल है कि jQuery ने अभी भी इस पर अपनी एड़ी को खोद लिया होगा, 2 साल बाद भी और 2.xx के आपके रिलीज़, नेवी, ने मेरे लिए दिन बचाया। इन सुधारों के बाकी अनावश्यक रूप से जटिल थे। धन्यवाद!

— unrivaledcreations

17

उपरोक्त उत्तरों के आधार पर मैंने निम्नलिखित एपीआई बनाया

/*
 * .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;
};

— सागर गाला
स्रोत

3

यह मददगार है, लेकिन एल्गोरिदम में समस्याएँ हैं: 1. यदि कोई मौजूदा क्लास स्ट्रिंग नहीं है, तो आपको क्लास जोड़ने पर 'अनिर्धारित क्लासनेम' मिलता है। 2. यदि क्लास स्ट्रिंग में एक वर्ग होता है जो नियमित अभिव्यक्ति का सुपरसेट होता है, तो आप क्लास स्ट्रिंग में जंक को पीछे छोड़ देते हैं। उदाहरण के लिए, यदि आप क्लास 'डॉग' को हटाने की कोशिश करते हैं और क्लास स्ट्रिंग में 'डॉगफूड' है, तो आपको क्लास स्ट्रिंग में 'फूड' छोड़ दिया जाएगा। यहाँ कुछ सुधार दिए गए हैं: jsfiddle.net/hellobrett/c2c2zfto

— Brett

1

यह एक सही समाधान नहीं है। यह उन सभी शब्दों को प्रतिस्थापित करता है जिन्हें आप हटाना चाहते हैं।

— tom10271

13

लोड करने के बाद jquery.svg.jsआपको इस फाइल को लोड करना होगा http://keith-wood.name/js/jquery.svgdom.js:।

स्रोत: http://keith-wood.name/svg.html#dom

काम करने का उदाहरण: http://jsfiddle.net/74RbC/99/

— bennedich
स्रोत

इसे जोड़ा - अभी भी काम नहीं कर रहा है। मैं jquery SVG की साइट पर प्रलेखन के माध्यम से देख रहा हूं, लेकिन इसकी अतिरिक्त कार्यक्षमता का उपयोग करने के लिए आपको क्या करना है, इसकी कोई स्पष्ट व्याख्या नहीं है।

— डॉन पी

7

बस सभी एसवीजी नोड्स में लापता प्रोटोटाइप निर्माता जोड़ें:

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

फिर आप jQuery की आवश्यकता के बिना इसे इस तरह से उपयोग कर सकते हैं:

this.addClass('clicked');

this.removeClass('clicked');

सारा श्रेय टॉड मोटो को जाता है ।

— ज़ियाद
स्रोत

ie11 इस कोड पर चुटकुले। यह

— पॉलीफ़िल

5

jQuery एसवीजी तत्वों के वर्गों का समर्थन नहीं करता है। आप तत्व को सीधे प्राप्त कर सकते हैं $(el).get(0)और उपयोग कर सकते हैं classListऔर add / remove। इसमें एक चाल यह भी है कि सबसे ऊपरी एसवीजी तत्व वास्तव में एक सामान्य डोम ऑब्जेक्ट है और इसे jQuery के हर दूसरे तत्व की तरह इस्तेमाल किया जा सकता है। अपनी परियोजना में मुझे इसकी आवश्यकता का ध्यान रखने के लिए बनाया गया था लेकिन मोज़िला डेवलपर नेटवर्क पर प्रदान किए गए दस्तावेज़ में एक शिम है जिसे एक विकल्प के रूप में इस्तेमाल किया जा सकता है।

उदाहरण

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

इसके बजाय आपके चयनकर्ता इंजन के रूप में D3.js का उपयोग करने के लिए एक वैकल्पिक सभी मुश्किल है। मेरी परियोजनाओं में ऐसे चार्ट हैं जो इसके साथ निर्मित हैं इसलिए यह मेरे ऐप स्कोप में भी है। डी 3 सही ढंग से वेनिला डोम तत्वों और एसवीजी तत्वों की वर्ग विशेषताओं को संशोधित करता है। हालांकि सिर्फ इस मामले के लिए डी 3 को जोड़ने की संभावना अधिक होगी।

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

— QueueHammer
स्रोत

1

उस d3 बिट के लिए धन्यवाद ... मैं वास्तव में पहले से ही पृष्ठ पर d3 था इसलिए बस उस का उपयोग करने का निर्णय लिया। बहुत उपयोगी :)

— मूवर्स

5

jQuery 2.2 एसवीजी श्रेणी के हेरफेर का समर्थन करता है

JQuery 2.2 और 1.12 जारी पद निम्नलिखित उद्धरण में शामिल हैं:

जबकि jQuery एक HTML लाइब्रेरी है, हम सहमत हुए हैं कि SVG एलिमेंट्स के लिए क्लास सपोर्ट उपयोगी हो सकता है। उपयोगकर्ता अब .addClass () , .removeClass () , .toggleClass () , और .hasClass () एसवीजी के तरीकों को कॉल कर सकेंगे । jQuery अब className गुण के बजाय वर्ग विशेषता को बदलता है । यह सामान्य XML दस्तावेज़ों में वर्ग विधियों को प्रयोग करने योग्य बनाता है। ध्यान रखें कि कई अन्य चीजें एसवीजी के साथ काम नहीं करेंगी, और हम अभी भी एसवीजी को समर्पित एक पुस्तकालय का उपयोग करने की सलाह देते हैं यदि आपको हेरफेर से परे कुछ भी चाहिए।

उदाहरण का उपयोग कर JQuery 2.2.0

यह परीक्षण करता है:

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

यदि आप उस छोटे वर्ग पर क्लिक करते हैं, तो यह उसका रंग बदल देगा क्योंकि classविशेषता को जोड़ा / हटा दिया गया है।

$("#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>

स्निपेट का विस्तार करें

— ROMANIA_engineer
स्रोत

3

यहाँ मेरा बल्कि असंगत लेकिन काम करने वाला कोड है जो निम्नलिखित मुद्दों (किसी भी निर्भरता के बिना) से संबंधित है:

classList<svg>IE में तत्वों पर मौजूद नहीं है
classNameIE में तत्वों classपर विशेषता का प्रतिनिधित्व नहीं करना<svg>
पुराने IE का टूटना getAttribute()और setAttribute()कार्यान्वयन

यह classListजहां संभव हो वहां उपयोग करता है।

कोड:

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
})();

उदाहरण का उपयोग:

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

— टिम डाउन
स्रोत

क्या आपने IE7 का उपयोग करके इसका परीक्षण किया था? क्योंकि LTE IE7 के लिए strAttributeName को "ClassName" की आवश्यकता होती है, जब एक CLASS विशेषता को सेट, प्राप्त या हटाया जाता है ।

— Knu

@Knu: यह नियमित रूप से HTML तत्वों के लिए IE 6 और 7 में काम करता है क्योंकि उन ब्राउज़रों में यह classNameगुण सेट करने की कोशिश करने के बजाय संपत्ति का उपयोग करता है । "LTE IE7 की आवश्यकता है कि जब क्लास को स्थापित करने, प्राप्त करने या निकालने के लिए" क्लासनेम "के लिए strAttributeName की आवश्यकता होती है , तो यह है कि उन ब्राउज़रों का टूटा हुआ कार्यान्वयन होता है getAttribute(x)और setAttribute(x)जो बस नाम के साथ संपत्ति प्राप्त करते हैं या सेट करते हैं x, इसलिए यह आसान और अधिक संगत है। सीधे संपत्ति सेट करने के लिए।

— टिम डाउन

@ कुन्नू: ठीक है। मुझे यकीन नहीं था कि SVG IE 7 में समर्थित नहीं है, इसलिए मुझे यकीन नहीं है कि आप <svg>एक पेज में एक तत्व को शामिल करके जो हासिल करना चाहते हैं , वह IE 7 में काम करने के लिए डिज़ाइन किया गया है। इसके लायक क्या है, मेरा कोड <svg>IE 7 में तत्वों में सफलतापूर्वक एक वर्ग विशेषता जोड़ देता है क्योंकि ऐसा तत्व किसी अन्य कस्टम तत्व की तरह व्यवहार करता है।

— टिम डाउन

रिमाइंडर के लिए धन्यवाद के बारे में पूरी तरह से भूल गया। बीमार Adobe SVG व्यूअर पर मेरे हाथ पाने की कोशिश करता है ताकि यह जांचा जा सके कि क्या यह इरादा है।

— Knu

2

मैं एक वर्ग और SVG में जोड़ने के लिए Snap.svg का उपयोग करता हूं।

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

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

— cjohndesign
स्रोत

1

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।

— ट्रिस्टन

1

एक तत्व svg तत्व के कंटेनर में जोड़ने के लिए हो सकता है:

$('.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>

स्निपेट का विस्तार करें

— claytronicon
स्रोत

1

मैंने इसे अपनी परियोजना में लिखा था, और यह काम करता है ... शायद;)

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

उदाहरण

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

— दारिस्ज़ माज़क्रज़क
स्रोत

0

ऊपर दिए गए उत्तरों से प्रेरित होकर, विशेष रूप से सागर गाला द्वारा, मैंने यह एपीआई बनाया है । यदि आप नहीं चाहते हैं या आप अपने jquery संस्करण को अपग्रेड नहीं कर सकते हैं तो आप इसका उपयोग कर सकते हैं।

— पत्थर क्रशर
स्रोत

-1

या पुराने स्कूल के डोम तरीकों का उपयोग करें जब JQ कहीं बीच में एक बंदर है।

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

डोम लोगों को जानें। यहां तक कि 2016 की रूपरेखा-पालूजा में भी यह नियमित रूप से काफी मदद करता है। इसके अलावा, यदि आप कभी किसी को डोम से विधानसभा की तुलना करते हुए सुनते हैं, तो उन्हें मेरे लिए किक करें।

— एरिक रेपेन
स्रोत

jQuery SVG, मैं क्यों नहीं जोड़ सकता हूँ?

jQuery 3 में यह समस्या नहीं है

समस्या:

JQuery के अंश attributes/classes.js:

निम्नलिखित कोड पर विचार करें:

JQuery SVG प्लगइन इसे कैसे संभालता है:

JQuery के SVG के कुछ अंश jquery.svgdom.js:

इस मुद्दे पर jQuery का ऐतिहासिक रुख:

एसवीजी / वीएमएल या नामांकित तत्व कीड़े

jQuery 2.2 एसवीजी श्रेणी के हेरफेर का समर्थन करता है

उदाहरण का उपयोग कर JQuery 2.2.0

JQuery के अंश `attributes/classes.js`:

JQuery के SVG के कुछ अंश `jquery.svgdom.js`: