我使用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.');
});
当前回答
加载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);
编辑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");
受到上述答案的启发，尤其是Sagar Gala，我创建了这个API。如果你不想或不能升级jquery版本，你可以使用它。
jQuery 2.2支持SVG类操作
jQuery 2.2和1.12发布的帖子包括以下引用:
While jQuery is a HTML library, we agreed that class support for SVG elements could be useful. Users will now be able to call the .addClass(), .removeClass(), .toggleClass(), and .hasClass() methods on SVG. jQuery now changes the class attribute rather than the className property. This also makes the class methods usable in general XML documents. Keep in mind that many other things will not work with SVG, and we still recommend using a library dedicated to SVG if you need anything beyond class manipulation.
jQuery 2.2.0示例
它测试:
.addClass（） .removeClass（） .hasClass（）
如果你点击那个小方块，它会改变它的颜色，因为class属性被添加/删除了。
$ (" # x”).click(函数(){ if ($(this).hasClass("clicked")) { (美元).removeClass(“点击”); }其他{ (美元).addClass(“点击”); ｝ })； .clicked { 填充:红色!重要; ｝ < html > < >头 < script src = " https://code.jquery.com/jquery-2.2.0.js " > < /脚本> > < /头 身体< > <svg width="80" height="80"> <rect id="x" width="80" height="80" style="fill:rgb(0,0,255)"/> < / svg > 身体< / > < / html >
一个解决方法是将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 >