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

Posted 2023-05-09

【中文标题】如何使用 jQuery 更改 SVG 元素属性？

【英文标题】：How to change SVG elements attributes using jQuery?

【发布时间】：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 元素访问和动画。

卡在岩石和坚硬的地方

感谢帮助 谢谢

【问题讨论】：

Keith Wood 的 jQuery-SVG 有点过时了。您应该考虑改用Raphael。

或 SVGWeb。 D3.js 也处理动画，但主要是一个数据可视化框架。

谢谢。会看看这些插件是否可以做我想要的。

为什么不能只使用纯 javascript 来完成这部分任务？

报告（或修复）jQuery 本身的错误怎么样？

【参考方案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');