Question

61

Remove or hide svg element

rated 0 times [ 62] [ 1] / answers: 1 / hits: 54377 / 10 Years ago, fri, july 4, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

margaritakristinak

Add To Favorites

Follow

Total Points: 502

Total Questions: 127

Total Answers: 98

Location: England

Member since Mon, May 17, 2021

3 Years ago

margaritakristinak questions

1 Parcel.js says to add the type=module attribute to the < script> tag but I've already added it

Thu, Mar 31, 22, 00:00, 2 Years ago

1 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from

Sun, Feb 20, 22, 00:00, 2 Years ago

1 Why is local storage deleted when I refresh the page?

Tue, May 11, 21, 00:00, 3 Years ago

1 Click event not firing on touchscreen when finger moves a bit

Tue, Oct 29, 19, 00:00, 5 Years ago

1 Nuxt.js: How to use the same page with different URLs and switch the components to be displayed according to the URL

Thu, Mar 28, 19, 00:00, 5 Years ago

View All

answered 10 Years ago annaliese · Accepted Answer

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