visibility is not working for svg g tag

css, javascript, svg

Solution

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

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

Problem

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?

Original source