javascript 可见性不适用于 svg g 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20328871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
visibility is not working for svg g tag
提问by Karthi Keyan
I'm using svg in my application and i using g tag to group the all elements. The first g tag contain more than g tag's, all g tag have their own different visibility style. If i set visibility hidden to the parent g tag it will affect the other g tag elements. I need to hide all the g tag elements by setting visibility to the parent but child elements visibility style should not change.
我在我的应用程序中使用 svg，我使用 g 标签对所有元素进行分组。第一个 g 标签包含多个 g 标签，所有 g 标签都有自己不同的可见性样式。如果我将可见性设置为隐藏到父 g 标签，它将影响其他 g 标签元素。我需要通过设置父元素的可见性来隐藏所有 g 标签元素，但子元素的可见性样式不应改变。
Here the sample svg
这里是示例 svg
<svg height: "200" width="200">
<g style="visibility:hidden">
<g style="visibility:visible">
<circle cx="100" cy="100" fill="green" r="15" />
</g>
</g>
</svg>
Here is the working Sample.
How can set visibility to the parent g tag without changing it child elements visibility?
这是工作示例。
如何在不改变子元素可见性的情况下设置父 g 标签的可见性？
回答by Andrew Surzhynskyi
Try to use opacity:0instead of visibility:hidden.
尝试使用opacity:0而不是visibility:hidden.
Also, you should look at this example http://svg-whiz.com/svg/HideShow.svg
另外，你应该看看这个例子http://svg-whiz.com/svg/HideShow.svg
回答by Ian
Hard to understand quite what you are after as the others have said.
很难像其他人所说的那样完全理解你在追求什么。
I had deleted this answer, as it feels I'm missing your point, but thought it may still help http://jsfiddle.net/rnZss/5/, it will still display the rect, but hide the circle, so I have left the answer for the moment. What else do you want to happen ?
我已经删除了这个答案，因为我觉得我没有理解你的观点，但认为它可能仍然有帮助http://jsfiddle.net/rnZss/5/，它仍然会显示矩形，但隐藏圆圈，所以我有暂时留下答案。你还想发生什么？
<svg height:"200" width="200">
<g style="visibility:hidden">
<g style="visibility:hidden">
<circle style="visibility: hidden"cx="100" cy="100" fill="green" r="15"/>
<rect style="visibility: visible" x="50" y="50" width="50" height="50"/>
</g>
</g>
</svg>
