如何使用jQuery更改SVG元素属性？

Question

我正在使用SVG来显示一些动画。但是作为SVG的新手我只是使用经过试验和测试的jQuery动画来制作动画SVG元素，如rect和circle等。

现在这不是jQuery Selector + SVG Incompatible?的重复.. 我想改变一个类 <rect class="my-class-1 box" ...></rect> 至 <rect class="my-class-2 box" ....></rect>

我尝试过addClass（）和removeClass（）的普通jquery方法。由于它们在HTML和SVG的DOM结构上存在差异，因此不起作用。

所以我正在使用http://keith-wood.name/svgRef.html插件来进行SVG元素访问和动画。

困在岩石和坚硬的地方之间

感谢帮助 Thnx

Answer 1

要使用jQuery svg插件完成此操作，请为rect提供一些自定义ID属性，并将其用作选择器。确保你也包括jquery.svgdom.js。

svgCanvas.polygon(group, getPoints(), { customID:'123', stroke: 'orange', strokeWidth: 2, class: 'my-class-1' });

现在要更改类，请使用此选择器：

var selector = 'svg polygon[customID="123"]';
$(selector).removeClass('my-class-1').addClass('my-class-2');