移除或隐藏 svg 元素

Posted 2023-03-06

【中文标题】移除或隐藏 svg 元素

【英文标题】：Remove or hide svg element

【发布时间】：2014-08-26 01:27:57

【问题描述】：

是否可以使用 css 或 jquery 删除或隐藏 svg 元素。 我知道如何使用 css “编辑” div 元素。像这样的：

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

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

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

谢谢

【参考方案1】：

使用 SVG visibility 属性。

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

visibility 属性允许您控制图形元素的可见性。值为 hidden 或 collapse 时，当前图形元素是不可见的

---

[

更新

]

不过display: none; 和opacity: 0 也可以。

但是要知道opacity (MDN Link) 是计算量最大的（因为它使元素单击事件保持活动状态，即使元素没有在视觉上显示），

然后visibility，

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

但急于使用display 并不总是最好的，因为我们可以更好地控制使用visibility 的元素（即，“如果您试图隐藏整个组，除了该组的一个特定成员, 使用 'visibility' 因为它在继承中是可覆盖的。”link)

SVG Resource

【讨论】：

谢谢。很简单。不知道我以前怎么没想到。