我使用Snap.svg向SVG添加一个类。

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

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

只需将缺失的原型构造函数添加到所有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');

所有功劳都归功于托德·莫托。

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

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

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

有元素。用于HTML和SVG元素的DOM API中的classList。不需要jQuery SVG插件，甚至jQuery。

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

如果你有动态类或者不知道什么类可以被应用，那么我认为这个方法是最好的方法:

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

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

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