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.

Here the sample 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?

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.

Here the sample 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?

• javascript
• css
• svg

• That's just how visibility works. What are you trying to achieve when you change the parent visibility? If the answer is nothing then just stop doing it. – Robert Longson Commented Dec 2, 2013 at 13:03
• Is there any reason for vote down?. can any one explain?. – Karthi Keyan Commented Dec 6, 2013 at 14:26
• I assume the downvote is because the question doesn't really make sense. You can't make a box invisible and not have the contents also be invisible. – isherwood Commented May 26, 2017 at 21:00

2 Answers 2

Try to use opacity:0 instead of visibility:hidden.

Also, you should look at this example http://svg-whiz./svg/HideShow.svg

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/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 ?

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