隐藏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接口如果与SVG不同。这就是jQuery无法使用fadeOut为SVG元素制作动画的原因，甚至可以像你想要的那样隐藏它们。

要隐藏，请将SVG元素的display属性设置为none。虽然jQuery不是设计用于与SVG DOM接口接口，但它仍然可以处理SVG元素所在的DOM元素。

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

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

简介：SVG和HTML元素的DOM接口是不同的

这也是使用jQuery无法创建SVG元素的原因，例如：

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

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

Answer 2

我没有找到直接隐藏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');