我正在使用 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：阅读接下来的两个答案。
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.0 修订版中列出的更改之一是：
这个问题的一个解决方案是升级到 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这些函数的属性。
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 插件通过修补相关函数来添加 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 目前在他们的Won't Fix页面上列出了这个问题。这是相关部分。
SVG/VML 或命名空间元素错误
jQuery 主要是用于 HTML DOM 的库，因此与 SVG/VML 文档或命名空间元素相关的大多数问题都超出了范围。我们确实尝试解决“渗透”到 HTML 文档的问题，例如从 SVG 中冒出的事件。
显然 jQuery 考虑了 jQuery 核心范围之外的完整 SVG 支持，并且更适合插件。
如果您有动态类或不知道可以应用哪些类，那么我认为这种方法是最好的方法：
// 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;
};