CODEWITHSUNDEEP
jquerysvghide
user2537093
user2537093

Reputation: 139

Hide SVG object - jQuery

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

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

Is it possible to hide SVG object with .hide('slow') ? it works fine without 'slow' option. Any idea ?

Upvotes: 2

Views: 5432

Answers (2)

Mateus Gon&#231;alves
Mateus Gon&#231;alves

Reputation: 706

I did not find a way to hide SVG directly, but I did it this way and it works:

<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');

Upvotes: 0

Lzh
Lzh

Reputation: 3635

jQuery can be used with SVG elements but one should understand that the DOM interface of HTML elements if different than those of SVG. This is why jQuery cannot animate SVG elements with fadeOut for example, or even hide them like you were trying to do.

To hide, set the display attribute of the SVG element to none. Although jQuery is not designed to interface with the SVG DOM interface, it can still handle DOM elements which SVG elements are.

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

Needs revision: jQuery's failure comes from the fact that is tries to hide using the style attribute of the SVG element. As far as browsers that implement the interfaces are concerned, style='display:none' is not applicable to SVG elements.

Summary: the DOM interfaces for SVG and HTML elements are different

This is also why one can't create SVG elements using jQuery, by using for example:

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

because jQuery will create an HTML element names rect, rather than an SVG element. The difference is the actual interface implemented! Cool right? :)

Upvotes: 2

Related Questions