删除或隐藏 svg 元素 [英] Remove or hide svg element

问题描述

是否可以使用 css 或 jquery 删除或隐藏 svg 元素.我知道如何使用 css编辑"div 元素.像这样:

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;
    }

而且我很好奇是否可以使用 svg 进行类似的操作.svg 代码示例

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">

谢谢

推荐答案

使用 SVG visibility 属性.

Use the SVG visibility attribute.

https://developer.mozilla.org/en-US/docs/Web/SVG/属性/可见性

可见性属性可让您控制图形元素的可见性.值为 hidden 或collapse 当前图形元素不可见

The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible

---

[更新]

但是 display: none; 和 opacity: 0 也可以工作.

However display: none; and opacity: 0 work too.

但要知道 opacity(MDN 链接) 是计算成本最高的(因为它使元素单击事件保持活动状态，即使该元素未在视觉上显示)，

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),

然后 visibility,

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

但是急于使用 display 并不总是最好的，因为我们可以通过 visibility 更好地控制元素(即，如果你想隐藏整个组，除了该组的一个特定成员，使用可见性"，因为它在继承中是可覆盖的."link)

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 资源

这篇关于删除或隐藏 svg 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！