Remove or hide svg element

Question

Is it possible to remove or hide the svg element using css or jquery. I know how to “edit” a div element using css. Something like that:

div[style="position: absolute; cursor: pointer; width: 207px; height: 95px; left: 513px; top: 0px; -webkit-transform-origin: 100% 0%;"] { display: none !important; } 

and I'm curious if something like this is possible with svg. Sample code for svg

 <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 207 95" xml:space="preserve" height="95px" viewBox="0 0 207 95" width="207px" version="1.1" y="0px" x="0px"> 

thanks

Answer 1

Use the SVG visibility attribute.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

The visibility attribute allows you to control the visibility of graphic elements. With a value of hidden or anti-aliasing, the current graphic element is invisible

<h / "> [ Update ]

However, display: none; and opacity: 0 also work.

But be aware that opacity ( MDN Link ) is the most computationally expensive (since it holds elements in the click event, even if the element is not visible)

then visibility ,

then display , https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display .

But the desire to use display not always better, because we get more control over the elements with visibility (i.e. "If you are trying to hide an entire group, except for one specific member of this group, use" visibility "because it is redefined in inheritance link )

Resource SVG