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

Question

我正在使用 SVG 来显示一些动画。但是作为 SVG 的新手，我只是使用久经考验的 jQuery 动画来为 SVG 元素制作动画，例如矩形和圆形等。

现在这不是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');