visibility is not working for svg g tag

Question

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?

Answer 1

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

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

Answer 2

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 ?

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