Javascript jQuery SVG，为什么我不能添加类？

我正在使用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'在现代浏览器中有效 小于3的JQuery无法将类添加到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.get0并使用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中的元素上不存在类列表 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； 设置间隔函数{ //可以使用toggleClass，但不能使用addClass。 如果翻转{ $'svg circle'.addClass'green'； } 否则{ $'svg circle'。删除类'green'； } 翻转=！翻转； }, 1000; svg圆{ 填充物：红色； 笔画：黑色； 笔画宽度：5； } 绿色{ 填充：绿色； }

---

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

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

jQuery2.2支持SVG类操作 这篇文章包括以下引文：

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

示例使用 它测试：

.addClass .removeClass 哈斯班先生 如果单击该小正方形，它将更改其颜色，因为类属性已添加/删除

$x.clickfunction{ 如果$this.hasClassclicked{ $this.removeClassclicked； }否则{ $this.addClassclicked； } }; .点击{ 填充：红色！重要； }

---

受上述答案的启发，特别是萨加尔·加拉的启发，我创作了这个。如果您不想或无法升级jquery版本，可以使用它。

一种解决方法是将类添加到svg元素的容器中：

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

---

当JQ在某个地方有猴子时，或者只使用老式DOM方法。< /P>

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与汇编进行比较，请帮我踢他们一脚。

我在我的项目中写了这篇文章，它很管用。。。可能

$.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)
    })
};    

---

添加了它-似乎仍然不起作用。我一直在查看jQuerySVG网站上的文档，但是没有明确说明如何使用它的额外功能。为了支持forresto建议，请使用-perfect。这应该是答案。虽然真正的答案是jquery在默认情况下包括这一点，至少是作为设置或其他东西。..attrclass，oldclass或更麻烦的东西。setAttributeclass，oldclass是

---

---

真的不等于删除newclass！很好的回答和很好的技巧。。。但是，如果是这样的话，编辑这个问题，让它从声明jquery不能向SVG添加类开始，这是一个好主意吗。。。看起来是这样吗？只是一个附录：我试过了，JQuery 3没有解决这个问题。我测试了这个问题，并且svg子元素的.classList似乎没有定义，至少在Chrome中是这样。在Chrome中对我有效。我在HTML中嵌入了SVG，所以我的文档结构如下所示：我用它在SVG元素中添加类，在Chrome中运行良好。IE没有在SVG元素上实现.classList和API。请参阅和已知问题列表。这也提到了WebKit浏览器。随着时间的推移，这个答案变得更加正确，也是最好的答案。这篇文章很好：所以为什么我不能使用jQuery*类函数这个实际问题仍然没有答案。。。如果我可以通过jQuery attr函数访问SVG元素的属性，为什么*class函数也不能这样做？jQuery失败？！？说真的，有人知道为什么吗？为SVG文件添加此功能的微型库：为什么是因为jQuery使用className属性，这是HTML元素的字符串属性，但是SVG元素的SVG动画字符串。不能为HTML元素指定like。因此，jQuery代码在尝试赋值时失败了。。。实际上我已经在页面上有了d3，所以我决定使用它。非常有用：你用IE7测试过吗？因为LTE IE7在设置、获取或删除类属性时要求strAttributeName为className。@Knu：它在IE 6和7中对于常规HTML元素肯定有效，因为在这些浏览器中它使用className属性，而不是试图设置属性。LTE IE7在设置、获取或删除类属性时要求strAttributeName为className的原因是，这些浏览器的getAttributex和setAttributex实现不完整，只需获取或设置名为x的属性，因此直接设置属性更容易、更兼容。@Knu:OK。我不确定，因为IE7不支持SVG，所以我不确定您希望通过在设计用于IE7的页面中包含元素来实现什么。值得一提的是，我的代码确实成功地为IE 7中的元素添加了一个class属性，因为这样的元素的行为与任何其他自定义元素一样。完全忘记了这一点，谢谢提醒。我会尝试使用Adobe SVG Viewer来检查它是否按预期工作。这对我来说是一个活期保护程序，因为我需要更改许多SVG元素来完成工作+999来自我：很难相信jQuery会在这件事上继续坚持下去，即使在2年后和2.x.x的发布之后。你的修理，导航，为我节省了时间。其余的修复程序都过于复杂。谢谢虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面更改，仅链接的答案可能会无效。这很有帮助，但算法存在问题：1。如果没有现有的类字符串，则在添加类时会得到“Undefined className”。2.如果类字符串包含作为正则表达式超集的类，则在类字符串中留下垃圾。例如，如果您试图删除类'dog'，而类字符串包含'dogfood'，则类字符串中将保留'food'。这里有一些修正：这不是一个完美的解决方案。它将替换包含要删除的类的所有单词。ie11阻塞此代码。这是一条更好的路线：

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