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

查看:3122
本文介绍了删除或隐藏svg元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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 属性。

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


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 ]

display:none; opacity:0 工作。

但是请注意 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

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

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

但是使用显示并不总是最好的,因为我们可以更好地控制元素 visibility (即,如果你试图隐藏整个组,除了该组的一个特定成员,使用visibility,因为它可以在继承中覆盖。 =http://svg-whiz.com/svg/HideShow.svg>链接)

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆