2 
<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 对象？如果没有“慢”选项，它可以正常工作。任何想法 ？

4

2 回答 2

2

jQuery 可以与 SVG 元素一起使用，但是应该理解 HTML 元素的 DOM 接口与 SVG 的不同。这就是为什么 jQuery 不能使用 fadeOut 为 SVG 元素设置动画，甚至不能像你试图做的那样隐藏它们。

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

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

需要修改： jQuery 的失败来自试图使用 SVG 元素的样式属性隐藏的事实。就实现接口的浏览器而言，style='display:none' 不适用于 SVG 元素。

总结：SVG 和 HTML 元素的 DOM 接口是不同的

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

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

因为 jQuery 将创建一个名为 rect 的 HTML 元素，而不是一个 SVG 元素。不同的是实际实现的接口！酷吧？:)

于 2014-07-19T17:58:36.983 回答
0

我没有找到直接隐藏 SVG 的方法，但我是这样做的，它可以工作：

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

//Your code jQuery here

$('.test-hide').css('display', 'none');
于 2019-04-30T16:22:21.723 回答