我正在使用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.');
});
答案 0 :(得分：417)
编辑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");
答案 1 :(得分：75)
DOM API中有element.classList，适用于HTML和SVG元素。不需要jQuery SVG插件甚至jQuery。
$(".jimmy").click(function() {
this.classList.add("clicked");
});
答案 2 :(得分：69)
the jQuery 3.0 revisions上列出的其中一项更改是：
这个问题的一个解决方案是升级到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"}
如果我们像jQuery一样将SVGAnimatedString对象转换为字符串，那么我们就会有[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，更适合插件。
答案 3 :(得分：38)
如果您有动态类或不知道哪些类已经应用，那么我认为这种方法是最好的方法：
// addClass
$('path').attr('class', function(index, classNames) {
return classNames + ' class-name';
});
// removeClass
$('path').attr('class', function(index, classNames) {
return classNames.replace('class-name', '');
});
答案 4 :(得分：16)
基于以上答案，我创建了以下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;
};
答案 5 :(得分：13)
加载jquery.svg.js后，您必须加载此文件：http://keith-wood.name/js/jquery.svgdom.js。
答案 6 :(得分：7)
只需将缺少的原型构造函数添加到所有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');
所有赠送金额都归Todd Moto。
答案 7 :(得分：5)
jQuery不支持SVG元素的类。您可以直接获取元素$(el).get(0)并使用classList和add / remove。这也是一个技巧，因为最顶层的SVG元素实际上是一个普通的DOM对象，并且可以像jQuery中的每个其他元素一样使用。在我的项目中，我创建了这个来处理我需要的东西，但Mozilla Developer Network上提供的文档有一个可以作为替代的垫片。
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);
答案 8 :(得分：5)
jQuery 2.2 and 1.12 Released帖子包含以下引语：
虽然jQuery是一个HTML库，但我们同意对SVG元素的类支持可能很有用。用户现在可以调用 .addClass（）， .removeClass（）， .toggleClass（）和 .hasClass SVG上的（）方法。 jQuery 现在更改了class属性而不是className属性。这也使得类方法可用于一般的XML文档。请记住，许多其他内容不适用于SVG，如果您需要除了类操作之外的任何内容，我们仍然建议使用专用于SVG的库。
它测试：
如果点击该小方块，它会改变颜色，因为添加/删除了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>
答案 9 :(得分：3)
这是我相当不优雅但工作正常的代码，它处理以下问题（没有任何依赖性）：
classList不存在于IE中的<svg>元素className不代表IE中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");
答案 10 :(得分：2)
我使用Snap.svg将类添加到SVG。
var jimmy = Snap(" .jimmy ")
jimmy.addClass("exampleClass");
答案 11 :(得分：1)
一种解决方法可能是将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>
答案 12 :(得分：0)
受到上述答案的启发，尤其是Sagar Gala，我创造了这个API。如果您不想或不能升级您的jquery版本，可以使用它。
答案 13 :(得分：0)
我在我的项目中写了这个，它可以工作......可能;）
$.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')
答案 14 :(得分：-1)
或者当JQ在中间的某个地方有一只猴子时，只使用老派的DOM方法。
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人员。即使在2016年的框架中，它也会有规律地帮助它。此外，如果您听到有人将DOM与装配进行比较，请为我们踢它们。