Tôi đang sử dụng jQuery SVG. Tôi không thể thêm hoặc xóa một lớp cho một đối tượng. Có ai biết lỗi của tôi không?

SVG:

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

JQuery sẽ không thêm lớp:

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

Tôi biết SVG và jQuery đang hoạt động tốt với nhau vì tôi có thể nhắm mục tiêu vào đối tượng và đưa ra cảnh báo khi nhấp vào:

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

Chỉnh sửa 2016: đọc hai câu trả lời tiếp theo.

• JQuery 3 khắc phục sự cố cơ bản
• Vanilla JS: element.classList.add('newclass')hoạt động trong các trình duyệt hiện đại

JQuery (dưới 3) không thể thêm một lớp vào một SVG.

.attr() hoạt động với SVG, vì vậy nếu bạn muốn phụ thuộc vào jQuery:

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

Và nếu bạn không muốn phụ thuộc vào jQuery:

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

Có phần tử. ClassList trong API DOM hoạt động cho cả các phần tử HTML và SVG. Không cần plugin jQuery SVG hoặc thậm chí jQuery.

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

jQuery 3 không có vấn đề này

Một trong những thay đổi được liệt kê trên các bản sửa đổi jQuery 3.0 là:

thêm thao tác lớp SVG ( # 2199 , 20aaed3 )

Một giải pháp cho vấn đề này là nâng cấp lên jQuery 3. Nó hoạt động rất tốt:

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>

Vấn đề:

Lý do các hàm thao tác lớp jQuery không hoạt động với các phần tử SVG là do các phiên bản jQuery trước 3.0 sử dụng thuộc classNametính cho các hàm này.

Trích từ jQuery attributes/classes.js:

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

Điều này hoạt động như mong đợi đối với các phần tử HTML, nhưng đối với các phần tử SVG classNamethì hơi khác một chút. Đối với một phần tử SVG, classNamekhông phải là một chuỗi, mà là một thể hiện của SVGAnimatedString.

Hãy xem xét các mã sau đây:

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>

Nếu bạn chạy mã này, bạn sẽ thấy một cái gì đó như sau trong bảng điều khiển dành cho nhà phát triển của bạn.

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

Nếu chúng ta truyền SVGAnimatedStringđối tượng đó thành một chuỗi như jQuery, chúng ta sẽ có [object SVGAnimatedString], đó là nơi jQuery thất bại.

Cách plugin jQuery SVG xử lý việc này:

Plugin jQuery SVG hoạt động xung quanh điều này bằng cách vá các chức năng có liên quan để thêm hỗ trợ SVG.

Trích từ jQuery SVG jquery.svgdom.js:

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

Hàm này sẽ phát hiện xem một phần tử có phải là phần tử SVG hay không và nếu có thì nó sẽ sử dụng thuộc baseValtính của SVGAnimatedStringđối tượng nếu có, trước khi quay lại classthuộc tính.

Lập trường lịch sử của jQuery về vấn đề này:

jQuery hiện liệt kê vấn đề này trên trang W't Fix của họ . Đây là những phần có liên quan.

Lỗi SVG / VML hoặc không gian tên

jQuery chủ yếu là một thư viện cho HTML DOM, vì vậy hầu hết các vấn đề liên quan đến tài liệu SVG / VML hoặc các phần tử được đặt tên đều nằm ngoài phạm vi. Chúng tôi cố gắng giải quyết các vấn đề "chảy qua" cho các tài liệu HTML, chẳng hạn như các sự kiện bong bóng ra khỏi SVG.

Rõ ràng jQuery đã xem xét hỗ trợ SVG đầy đủ bên ngoài phạm vi của lõi jQuery và phù hợp hơn với các plugin.

Nếu bạn có các lớp động hoặc không biết những lớp nào có thể được áp dụng thì phương pháp này tôi tin là cách tiếp cận tốt nhất:

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

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

Dựa trên các câu trả lời trên, tôi đã tạo API sau

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

Sau khi tải, jquery.svg.jsbạn phải tải tập tin này : http://keith-wood.name/js/jquery.svgdom.js.

Nguồn: http://keith-wood.name/svg.html#dom

Ví dụ hoạt động: http://jsfiddle.net/74RbC/99/

Chỉ cần thêm hàm tạo nguyên mẫu bị thiếu vào tất cả các nút 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);
  }
};

Sau đó, bạn có thể sử dụng nó theo cách này mà không yêu cầu jQuery:

this.addClass('clicked');

this.removeClass('clicked');

Tất cả tín dụng thuộc về Todd Moto .

jQuery không hỗ trợ các lớp của các phần tử SVG. Bạn có thể lấy phần tử trực tiếp $(el).get(0)và sử dụng classListvà add / remove. Cũng có một mẹo với điều này là phần tử SVG trên cùng thực sự là một đối tượng DOM bình thường và có thể được sử dụng như mọi phần tử khác trong jQuery. Trong dự án của tôi, tôi đã tạo ra điều này để quan tâm đến những gì tôi cần nhưng tài liệu được cung cấp trên Mozilla Developer Network có một shim có thể được sử dụng thay thế.

thí dụ

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

Một cách khác tất cả khó khăn hơn là sử dụng D3.js làm công cụ chọn của bạn. Các dự án của tôi có các biểu đồ được xây dựng cùng với nó vì vậy nó cũng nằm trong phạm vi ứng dụng của tôi. D3 sửa đổi chính xác các thuộc tính lớp của các phần tử vanilla DOM và các phần tử SVG. Mặc dù thêm D3 cho trường hợp này có thể sẽ là quá mức cần thiết.

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

jQuery 2.2 hỗ trợ thao tác lớp SVG

Các jQuery 2.2 và 1.12 Phát hành bài bao gồm các trích dẫn sau đây:

Mặc dù jQuery là một thư viện HTML, chúng tôi đã đồng ý rằng hỗ trợ lớp cho các phần tử SVG có thể hữu ích. Bây giờ người dùng sẽ có thể gọi các phương thức .addClass () , .removeClass () , .toggleClass () và .hasClass () trên SVG. Bây giờ jQuery thay đổi thuộc tính lớp thay vì thuộc tính className . Điều này cũng làm cho các phương thức lớp có thể sử dụng được trong các tài liệu XML nói chung. Hãy nhớ rằng nhiều thứ khác sẽ không hoạt động với SVG và chúng tôi vẫn khuyên bạn nên sử dụng thư viện dành riêng cho SVG nếu bạn cần bất cứ điều gì ngoài thao tác lớp.

Ví dụ sử dụng jQuery 2.2.0

Nó kiểm tra:

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

Nếu bạn nhấp vào hình vuông nhỏ đó, nó sẽ thay đổi màu sắc vì classthuộc tính được thêm / xóa.

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

Đây là mã khá không phù hợp nhưng hoạt động của tôi liên quan đến các vấn đề sau (không có bất kỳ phụ thuộc nào):

• classListkhông tồn tại trên <svg>các phần tử trong IE
• classNamekhông đại diện cho classthuộc tính trên <svg>các thành phần trong IE
• IE cũ bị hỏng getAttribute()và setAttribute()triển khai

Nó sử dụng classListnếu có thể.

Mã số:

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

Ví dụ sử dụng:

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

Tôi sử dụng Snap.svg để thêm một lớp và SVG.

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

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

Một cách giải quyết khác có thể là addClass vào một thùng chứa phần tử 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>

Tôi đã viết điều này trong dự án của tôi, và nó hoạt động ... có lẽ;)

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

ví dụ

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

Lấy cảm hứng từ các câu trả lời ở trên, đặc biệt là Sagar Gala, tôi đã tạo API này . Bạn có thể sử dụng nó nếu bạn không muốn hoặc không thể nâng cấp phiên bản jquery của bạn.

Hoặc chỉ sử dụng các phương thức DOM trường học cũ khi JQ có một con khỉ ở giữa một nơi nào đó.

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

Tìm hiểu người DOM. Ngay cả trong khuôn khổ năm 2016, nó cũng giúp khá thường xuyên. Ngoài ra, nếu bạn từng nghe ai đó so sánh DOM với lắp ráp, hãy đá chúng cho tôi.