ฉันใช้ jQuery SVG ฉันไม่สามารถเพิ่มหรือลบคลาสไปยังวัตถุ ใครทราบความผิดพลาดของฉัน

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

แก้ไข 2016: อ่านสองคำตอบต่อไป

• JQuery 3 แก้ไขปัญหาพื้นฐาน
• Vanilla JS: 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");

มีelement.classListใน DOM API ที่ใช้ได้กับทั้งองค์ประกอบ HTML และ SVG ไม่จำเป็นต้องใช้ปลั๊กอิน jQuery SVG หรือแม้แต่ jQuery

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

jQuery 3 ไม่มีปัญหานี้

การเปลี่ยนแปลงอย่างใดอย่างหนึ่งที่ระบุไว้ในการแก้ไข jQuery 3.0คือ:

เพิ่มการจัดการคลาส SVG ( # 2199 , 20aaed3 )

ทางออกหนึ่งสำหรับปัญหานี้คือการอัพเกรดเป็น 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 นั้นเป็นเพราะรุ่น jQuery ก่อนหน้า 3.0 ใช้classNameคุณสมบัติสำหรับฟังก์ชั่นเหล่านี้

ข้อความที่ตัดตอนมาจาก jQuery attributes/classes.js:

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

สิ่งนี้ทำงานตามที่คาดไว้สำหรับองค์ประกอบ HTML แต่สำหรับองค์ประกอบ SVG classNameนั้นแตกต่างกันเล็กน้อย สำหรับองค์ประกอบ SVG, 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 ทำงานได้โดยการแก้ไขฟังก์ชั่นที่เกี่ยวข้องเพื่อเพิ่มการรองรับ SVG

ข้อความที่ตัดตอนมาจาก jQuery SVG jquery.svgdom.js:

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

ฟังก์ชั่นนี้จะตรวจสอบว่าองค์ประกอบเป็นองค์ประกอบ SVG หรือไม่และหากเป็นองค์ประกอบนั้นจะใช้baseValคุณสมบัติของSVGAnimatedStringวัตถุหากมีอยู่ก่อนที่จะถอยกลับบนclassแอตทริบิวต์

จุดยืนทางประวัติศาสตร์ของ jQuery เกี่ยวกับปัญหา:

ขณะนี้ jQuery แสดงรายการปัญหานี้ในหน้าไม่แก้ไข นี่คือส่วนที่เกี่ยวข้อง

ข้อบกพร่องขององค์ประกอบ SVG / VML หรือ Namespaced

jQuery เป็นห้องสมุดหลักสำหรับ HTML DOM ดังนั้นปัญหาส่วนใหญ่ที่เกี่ยวข้องกับเอกสาร SVG / VML หรืออิลิเมนต์ที่กำหนดเนมสเปซอยู่นอกขอบเขต เราพยายามที่จะแก้ไขปัญหาที่ "ตกเลือด" กับเอกสาร HTML เช่นเหตุการณ์ที่เกิดขึ้นจาก SVG

เห็นได้ชัดว่า jQuery พิจารณาการสนับสนุน SVG เต็มรูปแบบนอกขอบเขตของแกน jQuery และเหมาะสำหรับปลั๊กอิน

หากคุณมีคลาสแบบไดนามิกหรือไม่ทราบว่าสามารถใช้คลาสใดได้วิธีนี้ฉันเชื่อว่าเป็นวิธีที่ดีที่สุด:

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

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

จากคำตอบข้างต้นฉันได้สร้าง API ต่อไปนี้

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

หลังจากโหลดแล้วjquery.svg.jsคุณต้องโหลดไฟล์นี้:http://keith-wood.name/js/jquery.svgdom.js .

ที่มา: http://keith-wood.name/svg.html#dom

ตัวอย่างการทำงาน: http://jsfiddle.net/74RbC/99/

เพียงเพิ่มตัวสร้างต้นแบบหายไปในโหน SVG ทั้งหมด:

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

เครดิตทั้งหมดไปที่ทอดด์ Moto

jQuery ไม่รองรับคลาสขององค์ประกอบ SVG คุณจะได้รับธาตุโดยตรง$(el).get(0)และใช้และclassList add / removeมีเคล็ดลับเกี่ยวกับเรื่องนี้ด้วยเช่นกันว่าองค์ประกอบ SVG ระดับบนสุดนั้นเป็นวัตถุ DOM ปกติและสามารถใช้งานได้เหมือนองค์ประกอบอื่น ๆ ใน jQuery ในโครงการของฉันฉันสร้างสิ่งนี้เพื่อดูแลสิ่งที่ฉันต้องการ แต่เอกสารที่ให้ไว้ในMozilla Developer Networkมี shim ที่สามารถใช้เป็นทางเลือก

ตัวอย่าง

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 เป็นเอ็นจิ้นตัวเลือกของคุณแทน โปรเจคของฉันมีแผนภูมิที่สร้างขึ้นด้วยดังนั้นมันจึงอยู่ในขอบเขตแอพของฉันด้วย D3 แก้ไขแอตทริบิวต์คลาสขององค์ประกอบ vanilla DOM และองค์ประกอบ SVG อย่างถูกต้อง แม้ว่าการเพิ่ม D3 สำหรับกรณีนี้น่าจะเกินความเป็นจริง

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

jQuery 2.2 รองรับการปรับเปลี่ยนคลาส SVG

jQuery 2.2 และ 1.12 ปล่อยตัวโพสต์รวมถึงคำพูดต่อไปนี้:

ในขณะที่ jQuery เป็นห้องสมุด HTML เราตกลงกันว่าการสนับสนุนคลาสสำหรับองค์ประกอบ SVG อาจมีประโยชน์ ผู้ใช้จะสามารถเรียกใช้. addClass () , .removeClass () , .toggleClass ()และ. hasClass ()บน SVG jQueryในขณะนี้มีการเปลี่ยนแปลงแอตทริบิวต์คลาสมากกว่าคุณสมบัติ className สิ่งนี้ยังทำให้วิธีการเรียนสามารถใช้งานได้ในเอกสาร XML ทั่วไป โปรดจำไว้ว่าสิ่งอื่น ๆ อีกมากมายจะไม่ทำงานกับ SVG และเรายังแนะนำให้ใช้ห้องสมุดที่อุทิศให้กับ SVG หากคุณต้องการอะไรนอกเหนือจากการจัดการชั้นเรียน

ตัวอย่างการใช้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>

นี่คือรหัสที่ค่อนข้างไม่ซับซ้อน แต่ใช้งานได้ซึ่งเกี่ยวข้องกับปัญหาต่อไปนี้ (โดยไม่มีการอ้างอิงใด ๆ ):

• classList ไม่มีอยู่ใน <svg>องค์ประกอบใน IE
• classNameไม่ได้เป็นตัวแทนclassคุณลักษณะเมื่อ<svg>องค์ประกอบใน IE
• เก่า 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");

ฉันใช้ Snap.svg เพื่อเพิ่มชั้นเรียนและ SVG

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

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

วิธีแก้ปัญหาหนึ่งอย่างคือ addClass ไปยังคอนเทนเนอร์ขององค์ประกอบ 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>

ฉันเขียนสิ่งนี้ในโครงการของฉันและใช้งานได้ ... อาจ;)

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

ได้รับแรงบันดาลใจจากคำตอบข้างต้นโดยเฉพาะ Sagar Gala ฉันได้สร้างAPIนี้ขึ้นมาแล้ว คุณสามารถใช้มันหากคุณไม่ต้องการหรือไม่สามารถอัพเกรดรุ่น jquery ของคุณ

หรือเพียงแค่ใช้วิธี DOM แบบโรงเรียนเก่าเมื่อ 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

เรียนรู้คน DOM แม้แต่ในกรอบปี 2559 palooza ก็ช่วยได้ค่อนข้างสม่ำเสมอ นอกจากนี้หากคุณเคยได้ยินใครบางคนเปรียบเทียบ DOM กับแอสเซมบลีให้เตะฉันแทน