Remove or hide SVG element
css, html, javascript, jquery, svg
Solution
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)
SVG Resource
Problem
Is it possible to remove or hide an SVG element using CSS or jQuery? I know how to "edit" div elements 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; } ``` I am curious whether something like that is possible 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"> ```