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

【问题标题】：How to change SVG elements attributes using jQuery?如何使用 jQuery 更改 SVG 元素属性？
【发布时间】：2012-06-19 19:06:51
【问题描述】：

我正在使用 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 元素访问和动画。

卡在岩石和坚硬的地方

感谢帮助谢谢

【问题讨论】：

【解决方案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');

【讨论】：