Javascript jquerysvg，为什么可以'；我不能去上课吗？

我正在使用jQuerySVG。我无法向对象添加或删除类。有人知道我的错误吗

SVG：

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

我知道SVG和jQuery配合得很好，因为我可以以对象为目标，并在单击对象时发出警报：

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

---

加载

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

资料来源：

工作示例：
编辑2016：阅读下面两个答案


jQuery3修复了根本问题
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");

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

如果您不想依赖jQuery：

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

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

domapi中有一个可用于HTML和SVG元素的函数。不需要jQuerySVG插件，甚至不需要jQuery

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

jQuery不支持SVG元素的类。您可以直接获取元素
$（el）。获取（0）
并使用
classList
和
add/remove
。这也有一个技巧，最顶层的SVG元素实际上是一个普通的DOM对象，可以像jQuery中的其他元素一样使用。在我的项目中，我创建了这个来满足我的需要，但是上提供的文档有一个垫片，可以用作替代


另一个更难的选择是使用D3.js作为选择器引擎。我的项目有用它构建的图表，所以它也在我的应用程序范围内。D3正确地修改了普通DOM元素和SVG元素的类属性。虽然仅仅在这种情况下增加D3可能会有点过头

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

如果您有动态类或不知道可以应用哪些类，那么我认为这种方法是最好的方法：

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

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

所有的功劳都归我所有。
这是我相当不雅观但能工作的代码，它处理以下问题（没有任何依赖性）：


IE中的
元素上不存在
classList
className
不表示IE中
元素的
class
属性
旧IE已损坏
getAttribute（）
和
setAttribute（）
实现

它尽可能使用
classList

代码：

用法示例：

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

jQuery3没有这个问题
上列出的更改之一是：

添加SVG类操作（，）

这个问题的一个解决方案是升级到jQuery3。它非常有效：


var flip=true；
setInterval（函数（）{
//可以使用toggleClass，但不能使用addClass。
如果（翻转）{
$（'svg circle'）.addClass（'green'）；
}
否则{
$（'svg circle'）.removeClass（'green'）；
}
翻转=！翻转；
}, 1000);
svg圈{
填充物：红色；
笔画：黑色；
笔画宽度：5；
}
绿色{
填充：绿色；
}
我使用Snap.svg向和svg添加一个类

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

jQuery 2.2支持SVG类操作
这篇文章包括以下引文：

虽然jQuery是一个HTML库，但我们一致认为对SVG元素的类支持可能是有用的。用户现在可以在SVG上调用.addClass（）、.removeClass（）、.toggleClass（）和.hasClass（）方法jQuery现在更改class属性，而不是className属性。这也使得类方法在一般XML文档中可用。请记住，许多其他东西都无法使用SVG，如果您需要类操作以外的任何东西，我们仍然建议您使用专用于SVG的库

示例使用
它测试：


.addClass（）
.removeClass（）
.hasClass（）

如果单击该小正方形，它将更改其颜色，因为添加/删除了
class
属性


$（“#x”）。单击（函数（）{
if（$（this）.hasClass（“单击”））{
$（此）.removeClass（“单击”）；
}否则{
$（此）.addClass（“单击”）；
}
});
。单击{
填充：红色！重要；
}

受上述答案的启发，特别是萨加尔·加拉的启发，我创作了这个。如果您不想或无法升级jquery版本，可以使用它。
一种解决方法是将类添加到svg元素的容器中：


$（'.svg容器'）.addClass（'svg-red'）
.svg红色svg圆圈{
填充：#ED3F32；
}

< / > > P>或者当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年的palooza框架中，它也会定期提供帮助。另外，如果你听到有人将DOM与汇编进行比较，请帮我踢他们一脚。
我在我的项目中写了这篇文章，它很管用。。。可能；）

添加了它-似乎仍然不起作用。我一直在查看jQuerySVG网站上的文档，但是没有明确说明如何使用它的额外功能。为了支持forresto建议，请使用-perfect。这应该是答案。虽然真正的答案是jquery在默认情况下包括这一点，至少作为一个设置或其他东西。
.attr（“class”，“oldclass”）
（或者更麻烦的
。setAttribute（“class”，“oldclass”）
）实际上并不等同于删除
newclass
！很好的回答（和很好的技巧）。。。但是，编辑这个问题，让它从声明jquery不能将类添加到SVG开始（如果是这样的话……看起来是这样），这是一个好主意吗？
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

$.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')