288

আমি jQuery এসভিজি ব্যবহার করছি। আমি কোনও বস্তুকে ক্লাস যুক্ত করতে বা সরাতে পারছি না। আমার ভুল কেউ জানেন?

এসভিজি:

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

JQuery যা শ্রেণি যোগ করবে না:

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

আমি জানি যে এসভিজি এবং জকিউয়ারি একসাথে ভাল কাজ করছে কারণ আমি অবজেক্টটিকে টার্গেট করতে পারি এবং যখন ক্লিক করা হয় তখন একটি সতর্কতা ফায়ার করতে পারি :

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

— ডন পি
সূত্র

4

এখানে ভাল নিবন্ধ: toddmotto.com/…

— ক্রিস

8

সুতরাং আমি কেন jQuery * শ্রেণীর ফাংশনগুলি ব্যবহার করতে পারি না এর আসল প্রশ্নটি উত্তরহীন রয়ে গেছে ... আমি যদি jQuery অ্যাটর ফাংশনের মাধ্যমে এসভিজি উপাদানগুলির বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারি তবে * শ্রেণি ফাংশনগুলিও কেন এটি করতে পারে না? jQuery ব্যর্থ?!?

— রায়ান গ্রিগস

2

সিরিয়াসলি, কেউ কেন জানে ??

— বেন উইল্ড

ক্ষুদ্র গ্রন্থাগার যা এসভিজি ফাইলগুলির জন্য এই কার্যকারিতা যুক্ত করে: github.com/toddmotto/lunar

— চক লে বাট

6

"কেন" কারণ jQuery "শ্রেণি নাম" বৈশিষ্ট্যটি ব্যবহার করে যা এইচটিএমএল উপাদানগুলির জন্য একটি স্ট্রিং সম্পত্তি, তবে এসভিজি উপাদানগুলির জন্য একটি এসভিজি অ্যানিমেটেড স্ট্রিং। যা এইচটিএমএল উপাদানগুলির জন্য পছন্দ হিসাবে নির্ধারিত হতে পারে না। সুতরাং, jQuery কোড মান নির্ধারণের চেষ্টা করে ফুরিয়েছে।

— জন ওয়াট

426

2016 সম্পাদনা করুন: পরবর্তী দুটি উত্তর পড়ুন।

JQuery 3 অন্তর্নিহিত সমস্যাটি সমাধান করে
ভ্যানিলা জেএস: element.classList.add('newclass')আধুনিক ব্রাউজারগুলিতে কাজ করে

JQuery (3 এর কম) কোনও এসভিজিতে কোনও শ্রেণি যোগ করতে পারে না।

.attr() এসভিজির সাথে কাজ করে, তাই আপনি যদি 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

নিখুঁত। এই উত্তর হওয়া উচিত। যদিও প্রকৃত উত্তরটি jquery এর জন্য এটি ডিফল্টরূপে অন্তত অন্তর্ভুক্ত করার জন্য, অন্তত একটি সেটিংস বা অন্য কিছু হিসাবে।

— 39

2

.attr("class", "oldclass")(বা আরও জটিল .setAttribute("class", "oldclass")) সত্যিই সরানোর সমতুল্য নয় newclass!

— টম

দুর্দান্ত উত্তর (এবং v.nice কৌশল) ... তবে প্রশ্নটি সম্পাদনা করার জন্য এটি কী ধারণা হবে যাতে এটি শুরু করে বলা হয় যে জেকোয়ারি কোনও এসভিজিতে কোনও শ্রেণি যোগ করতে পারে না (যদি এটি হয় ... তবে মনে হয়) )?

— বাইরনয়াসগুর

1

কেবলমাত্র একটি সংযোজন: আমি চেষ্টা করেছি এবং JQuery 3 সমস্যাটি সমাধান করে নি।

— জোয়াও মধ্যে Arruda

76

নেই element.classList করে DOM API এ উভয় এইচটিএমএল এবং SVG উপাদানের জন্য কাজ করে। JQuery এসভিজি প্লাগইন বা এমনকি jQuery প্রয়োজন নেই।

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

— টমাস মিকুলা
সূত্র

3

আমি এটি পরীক্ষা করেছি এবং .classList কমপক্ষে Chrome এ, svg উপ-উপাদানগুলির জন্য অপরিজ্ঞাত বলে মনে হচ্ছে।

— ক্রিস জয়েস

3

ক্রোমে আমার জন্য কাজ করে। আমার এইচটিএমএলে এমভিডিজ রয়েছে, সুতরাং আমার নথির কাঠামোটি এর মতো দেখাচ্ছে: <html> <svg> <বৃত্ত শ্রেণি = "জিমি" ...> </svg> </html>

— টমাস মিকুলা ২

1

আমি <g> এসভিজি উপাদানটিতে ক্লাস যুক্ত করতে এটি ব্যবহার করেছি, ক্রোমে ভাল কাজ করে।

— রাচেল উয়ে

20

IE এসভিজি উপাদানগুলিতে .classList এবং API প্রয়োগ করে না। দেখুন caniuse.com/#feat=classlist এবং "জ্ঞাত সমস্যাগুলি" তালিকা। এটি ওয়েবকিট ব্রাউজারগুলিরও উল্লেখ করে।

— শেনমে

9

এবং সময়

— বাড়ার সাথে সাথে

69

jQuery 3 এ সমস্যা নেই

JQuery 3.0 রিভিশনগুলিতে তালিকাভুক্ত পরিবর্তনগুলির মধ্যে একটি:

এসভিজি বর্গ হেরফের যোগ করুন ( # 2199 , 20aa33 )

এই ইস্যুটির একটি সমাধান হ'ল 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 শ্রেণীর কারসাজি কার্যগুলি SVG উপাদানগুলির সাথে কাজ না করার কারণটি হল 3.0 এর পূর্বে jQuery সংস্করণগুলি classNameএই ফাংশনগুলির জন্য সম্পত্তি ব্যবহার করে ।

JQuery থেকে অংশ `attributes/classes.js`:

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

এটি এইচটিএমএল উপাদানগুলির জন্য প্রত্যাশার মতো আচরণ করে তবে এসভিজি উপাদানগুলির 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 এসভিজি প্লাগইন এটি পরিচালনা করে:

JQuery এসভিজি প্লাগইন এসভিজি সমর্থন যুক্ত করতে প্রাসঙ্গিক ফাংশনগুলি প্যাচ করে এর চারপাশে কাজ করে।

JQuery এসভিজির সংক্ষিপ্তসার `jquery.svgdom.js`:

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

এই ফাংশনটি সনাক্ত করবে যে কোনও উপাদান কোনও এসভিজি উপাদান কিনা, এবং যদি এটি থাকে তবে বৈশিষ্ট্যের পিছনে নেমে যাওয়ার আগে যদি এটি উপলব্ধ থাকে baseValতবে SVGAnimatedStringবস্তুর সম্পত্তিটি ব্যবহার করবে class।

ইস্যুতে jQuery এর historicalতিহাসিক অবস্থান:

jQuery বর্তমানে তাদের উইন ফিক্স পৃষ্ঠায় এই সমস্যাটি তালিকাবদ্ধ করে । এখানে প্রাসঙ্গিক অংশ।

এসভিজি / ভিএমএল বা নেমস্পিড এলিমেটস বাগগুলি

jQuery মূলত এইচটিএমএল ডিওএম এর জন্য একটি গ্রন্থাগার, সুতরাং এসভিজি / ভিএমএল নথি বা নেমস্পিডের উপাদানগুলির সাথে সম্পর্কিত বেশিরভাগ সমস্যার সুযোগ নেই। আমরা এইচটিএমএল নথিগুলিতে "রক্তপাত" হওয়া সমস্যাগুলি সমাধান করার চেষ্টা করি, যেমন এসভিজি থেকে বেরিয়ে আসা ইভেন্টগুলি।

স্পষ্টতই jQuery jQuery কোর এর ক্ষেত্রের বাইরে পূর্ণ এসভিজি সমর্থন হিসাবে বিবেচিত এবং প্লাগইনগুলির জন্য আরও উপযুক্ত।

— আলেকজান্ডার ও'মারা
সূত্র

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 বছর পরেও এবং ২.xx xx প্রকাশের পরে আপনার ফিক্স, এনএভি, আমার জন্য দিনটি রক্ষা করেছিল। এই ফিক্সগুলির বাকিগুলি অযথা জটিল ছিল। ধন্যবাদ!

— অবিচ্ছিন্নভাবে

17

উপরের উত্তরের ভিত্তিতে আমি নিম্নলিখিত এপিআই তৈরি করেছি created

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

এটি সহায়ক, তবে অ্যালগরিদমে সমস্যাগুলি রয়েছে: ১. যদি বিদ্যমান শ্রেণি স্ট্রিং না থাকে তবে একটি শ্রেণি যুক্ত করার পরে আপনি 'অপরিজ্ঞাত শ্রেণীকরণ' পাবেন। ২. যদি শ্রেণীর স্ট্রিংয়ে এমন কোনও শ্রেণি থাকে যা নিয়মিত প্রকাশের সুপারস্টেট হয় তবে আপনি ক্লাসের স্ট্রিংয়ে জাঙ্ক পিছনে রেখে যান। উদাহরণস্বরূপ, আপনি যদি ক্লাস 'কুকুর' মুছে ফেলার চেষ্টা করেন এবং ক্লাসের স্ট্রিংয়ে 'ডগফুড' থাকে তবে শ্রেণিক স্ট্রিংয়ে আপনাকে 'খাবার' রেখে দেওয়া হবে। এখানে কিছু সংশোধন করা হয়েছে: jsfiddle.net/hellobrett/c2c2zfto

— ব্রেট

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 এসভিজির সাইটে ডকুমেন্টেশনগুলি দেখছি, তবে এর অতিরিক্ত কার্যকারিতাটি ব্যবহার করার জন্য আপনাকে কী করতে হবে তার কোনও স্পষ্ট ব্যাখ্যা নেই।

— ডন পি

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 এই কোডটিতে chokes। এই পলিফিলটি একটি আরও ভাল রুট ছিল: github.com/eligrey/classList.js

— ryanrain

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 একটি এইচটিএমএল লাইব্রেরি হলেও আমরা সম্মত হয়েছি যে এসভিজি উপাদানগুলির জন্য শ্রেণি সমর্থন কার্যকর হতে পারে। ব্যবহারকারীরা এখন এসভিজিতে .addClass () , .removeClass () , .toggleClass () , এবং .hasClass () পদ্ধতিগুলিতে কল করতে সক্ষম হবেন । jQuery এখন ক্লাসের নাম বৈশিষ্ট্যের পরিবর্তে শ্রেণীর বৈশিষ্ট্য পরিবর্তন করে । এটি সাধারণ এক্সএমএল নথিগুলিতে শ্রেণিক পদ্ধতিগুলি ব্যবহারযোগ্য করে তোলে। মনে রাখবেন যে আরও অনেকগুলি জিনিস এসভিজির সাথে কাজ করবে না এবং আমরা এখনও ক্লাসের কারসাজির বাইরে কিছু প্রয়োজন হলে এসভিজিকে উত্সর্গীকৃত একটি গ্রন্থাগার ব্যবহার করার পরামর্শ দিই।

JQuery ২.২.০ ব্যবহারের উদাহরণ

এটি পরীক্ষা করে:

.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>আইই তে উপাদানগুলিতে বিদ্যমান নেই
classNameআইই উপাদানগুলিতে classবৈশিষ্ট্য উপস্থাপন না<svg>
ওল্ড আইই এর ভাঙ্গা 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");

— টিম ডাউন
সূত্র

আপনি এটি আই 7 ব্যবহার করে পরীক্ষা করেছেন? কারণ এলটিই আইই 7 এর জন্য একটি ক্লাস অ্যাট্রিবিউট সেট করা, গ্রহণ করা বা অপসারণ করার সময় স্ট্র্যাট্রিবিউটনেমকে "শ্রেণীর নাম" হওয়া দরকার ।

— নু

@ ক্নু: এটি নিয়মিত এইচটিএমএল উপাদানগুলির জন্য আইই 6 এবং 7 তে অবশ্যই কাজ করে কারণ এই ব্রাউজারগুলিতে এটি classNameকোনও বৈশিষ্ট্য নির্ধারণের পরিবর্তে সম্পত্তিটি ব্যবহার করে । "এলটিই আইই 7 এর জন্য কোনও ক্লাসের বৈশিষ্ট্য নির্ধারণ, প্রাপ্তি বা অপসারণ করার সময়" ক্লাসের নাম "হওয়ার জন্য স্ট্র্যাট্রিবিউটনামের প্রয়োজন হওয়ার কারণটি হ'ল সেই ব্রাউজারগুলির একটি ভাঙা বাস্তবায়ন রয়েছে getAttribute(x)এবং setAttribute(x)যা নামটির সাথে সম্পত্তিটি কেবল পেয়ে বা সেট করে x, তাই এটি সহজ এবং আরও সুসংগত compatible সম্পত্তি সরাসরি সেট করতে।

— টিম ডাউন

@ কন্নু: ঠিক আছে। আইভি in-তে এসভিজি সমর্থিত নয় বলে আমি নিশ্চিত ছিলাম না, তাই আমি নিশ্চিত নই যে আপনি <svg>যে পৃষ্ঠায় আইই 7.. তে কাজ করার জন্য নকশাকৃত একটি উপাদান অন্তর্ভুক্ত করে কী অর্জন করতে পারবেন তা নিশ্চিত নই , আমার কোডটির মূল্য কী? <svg>IE 7 এর উপাদানগুলিতে সাফল্যের সাথে একটি শ্রেণীর বৈশিষ্ট্য যুক্ত করে যেহেতু এই জাতীয় উপাদানটি অন্য কোনও কাস্টম উপাদানগুলির মতো আচরণ করে।

— টিম ডাউন

অনুস্মারকটির জন্য ধন্যবাদটি সম্পর্কে সম্পূর্ণরূপে ভুলে গেছি। আমি অ্যাডোব এসভিজি ভিউয়ারের উদ্দেশ্য অনুযায়ী কাজ করে কিনা তা পরীক্ষা করার জন্য আমার হাত পেতে চেষ্টা করব।

— নু

2

আমি Snap.svg এবং এসভিজির ক্লাস যুক্ত করতে ব্যবহার করি।

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

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

— cjohndesign
সূত্র

1

যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে।

— ত্রিস্তান

1

একটি কার্যকারিতা হ'ল এসভিজি উপাদানটির একটি ধারকটিতে ক্লাস যুক্ত করা:

$('.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 সংস্করণটি আপগ্রেড করতে না পারেন তবে আপনি এটি ব্যবহার করতে পারেন।

— Stonecrusher
সূত্র

-1

অথবা যখন জিকিউ এর মাঝখানে কোথাও একটি বানর থাকে তখন কেবল পুরানো-স্কুল ডিওএম পদ্ধতিগুলি ব্যবহার করুন।

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 এসভিজি, আমি কেন যোগ করতে পারি না ক্লাস?

jQuery 3 এ সমস্যা নেই

সমস্যাটি:

JQuery থেকে অংশ attributes/classes.js:

নিম্নলিখিত কোড বিবেচনা করুন:

কীভাবে jQuery এসভিজি প্লাগইন এটি পরিচালনা করে:

JQuery এসভিজির সংক্ষিপ্তসার jquery.svgdom.js:

ইস্যুতে jQuery এর historicalতিহাসিক অবস্থান:

এসভিজি / ভিএমএল বা নেমস্পিড এলিমেটস বাগগুলি

jQuery 2.2 এসভিজি বর্গ ম্যানিপুলেশন সমর্থন করে

JQuery ২.২.০ ব্যবহারের উদাহরণ

JQuery থেকে অংশ `attributes/classes.js`:

JQuery এসভিজির সংক্ষিপ্তসার `jquery.svgdom.js`: