Remove or hide svg element
is it possible to remove or hide svg element using css or jquery.
I know how to “edit” div element using css. Something like this:
div[style="position: absolute; cursor: pointer; width: 207px; height: 95px; left: 513px; top: 0px; -webkit-transform-origin: 100% 0%;"] {
display: none !important;
}
and i am curious is ti possible something like that with svg.
Code example 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">
Thank you
Use the SVG visibility attribute.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility
The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible
[update]
However display: none; and opacity: 0 work too.
But know that opacity (MDN Link) is the most computationally expensive (as it keeps the elements click event alive even though the element isn’t displayed visually),
then visibility,
then display, https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display.
But rushing to use display isn’t always the best because we get more control over the elements with visibility (i.e., “If you are trying to hide an entire group, except for one particular member of that group, use ‘visibility’ as it is overrideable in inheritance.” link)
