一个解决方法是将class添加到svg元素的容器中:

$ (' .svg-container ') .addClass(“svg-red”); . SVG -红色SVG圆圈{ 填充:# ED3F32; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div class = " svg-container”> <svg height="40" width="40"> <circle cx="20" cy="20" r="20"/> < / svg > < / div >

加载jquery.svg.js后，必须加载这个文件:http://keith-wood.name/js/jquery.svgdom.js。

来源:http://keith-wood.name/svg.html dom

工作示例:http://jsfiddle.net/74RbC/99/

jQuery不支持SVG元素的类。您可以直接获取元素$(el).get(0)，并使用classList和添加/删除。这也有一个技巧，最上面的SVG元素实际上是一个普通的DOM对象，可以像jQuery中的其他元素一样使用。在我的项目中，我创建了这个来照顾我需要的东西，但Mozilla开发者网络上提供的文档有一个垫片，可以用作替代方案。

例子

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正确地修改了普通DOM元素和SVG元素的类属性。不过在这种情况下添加D3可能会过量。

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

受到上述答案的启发，尤其是Sagar Gala，我创建了这个API。如果你不想或不能升级jquery版本，你可以使用它。

编辑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");

这里是我的相当不优雅，但工作的代码，处理以下问题(没有任何依赖):

IE中<svg>元素上不存在classList className不代表IE中<svg>元素上的class属性 旧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");