带有 SVG 文档的 jQuery

Posted 2023-03-05

【中文标题】带有 SVG 文档的 jQuery

【英文标题】：jQuery with an SVG document

【发布时间】：2012-12-06 11:43:45

【问题描述】：

jQuery 设计用于带有 javascript 的 html 页面。

SVG 使用与 HTML 相同的 DOM Level 2，但基于 XML 并指定 ECMAScript。

将 jQuery 与 SVG 一起使用会导致什么问题？将这样的 SVG 作为元素嵌入到 HTML 文档中会更好吗？

注意，我指的不是“jQuery SVG”绘图库，它提供了使用 jQuery 语法将 HTML 文档中的 SVG 元素作为图形端口进行操作。我想要的是在 SVG 元素上使用 jQuery 选择器和事件管理，SVG 根可能在 HTML 中，也可能不在。

【问题讨论】：

Re：关于 javascript 与 ecmascript 的混淆，参见例如 ***.com/questions/912479/…。

可能重复：***.com/questions/2294801/jquery-under-svg。无论如何，为什么不直接尝试 D3.js 呢？ D3 具有简单的事件绑定和选择器。特别是因为您似乎不太关心不支持 SVG 的浏览器。

@ErikDahlström 哦，谢谢！

【参考方案1】：

尝试一下，选择器似乎可以工作，但其他事情却不行。用于初始化页面的 $( function() ) 习惯用法不起作用，因为 SVG 仅将 SVGLoad 事件传递给顶部 <svg> 元素。不过，$('svg').bind('SVGLoad', function()) 确实有效。

使用 .append 动态添加元素会将它们放入 DOM 中，这样它们就不会被渲染，至少在 Firefox 上是这样。即使在重新渲染文档（包括在没有 jQuery 的情况下动态添加的元素）后，幻像元素仍然不可见。 $().attr(key, value) 可能会更改属性但不会更新屏幕显示。

不幸的是，这一切似乎都被打破了。一旦嵌入到 XHTML 文档中，更多的功能就会起作用。但是上述缺陷仍然存在，使用另一个框架可能会更好。也许让 jQuery SVG 再看一眼……