jquery - 隐藏 SVG 对象 - jQuery

Question

<object id="edge-up" height="26px" width="208px" data="svg/edge-up.svg" type="image/svg+xml"></object>

---

$("#edge-up").hide('slow');

是否可以使用 .hide('slow') 隐藏 SVG 对象？没有“慢”选项它工作正常。有什么想法吗？

Answer 1

jQuery 可以与 SVG 元素一起使用，但应该理解 HTML 元素的 DOM 接口(interface)与 SVG 的不同。这就是为什么 jQuery 无法使用 fadeOut 等方式对 SVG 元素进行动画处理，甚至无法像您尝试的那样隐藏它们。

要隐藏，请将 SVG 元素的显示属性设置为无。尽管 jQuery 的设计目的不是与 SVG DOM 接口(interface)交互，但它仍然可以处理 SVG 元素所属的 DOM 元素。

  $("#idOfSVGElement").attr("display", "none"); //will hide an element.
  $("#idOfSVGElement").removeAttr("display"); //will show it again.

需要修改: jQuery 的失败源于它试图使用 SVG 元素的 style 属性来隐藏。对于实现该接口(interface)的浏览器而言，style='display:none' 不适用于 SVG 元素。

总结:SVG 和 HTML 元素的 DOM 接口(interface)不同

这也是为什么不能使用 jQuery 创建 SVG 元素的原因，例如:

 $("<rect>").attr( ...etc ...);

因为 jQuery 将创建一个名为 rect 的 HTML 元素，而不是一个 SVG 元素。区别在于实际实现的接口(interface)!很酷吧？ :)