CODEWITHSUNDEEP
svg
Scyla101
Scyla101

Reputation: 242

Behavior of the SVG g-element and the visibility attribute

Hello at the moment I'm trying to incorporate SVG as the main display format for my application. However I found a rather strange behavior when it comes to the visibility attribute. Given this example:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
    <g id="visibility-test">
        <rect x="100" y="0" height="140" width="40"/>
        <rect x="0" y="100" height="40" width="140" visibility="visible"/>
    </g>                
</svg>

This behaves as expected. The two rectangles are visible. Now I want to make the whole group I set the visibility of the g-element to hidden like such:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
    <g id="visibility-test" visibility="hidden">
        <rect x="100" y="0" height="140" width="40"/>
        <rect x="0" y="100" height="40" width="140" visibility="visible"/>
    </g>                
</svg>

If you look at this in the browser it hides one rectangle (the one without any attribute) but the one with the visibility attribute is still visible. I would've expected a behavior where the visibility of the whole branch is affected but the parent element.

Is there any way to achieve this behavior without toggling the visibility of ever child?

Upvotes: 3

Views: 9367

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

SVG does not work like HTML in the DOM. SVG is namespaced. The browser uses a HTML parser to parse the HTML in the webpage. And the browser will also use the XML parser for the SVG markup on the webpage. So they are treated differently, even though they are rendered on the same page.

If the parent has the visibility attribute. And any of their children also has a visibiity attribute. Then you need to change that childs visibility attribute to inherit. SVG will allow a child to still be visible even if its parent is set to hidden.

W3C SVG visibility attribute spec:

http://www.w3.org/TR/SVG11/painting.html#VisibilityProperty

Available values for the SVG visibility attribute:

visible | hidden | collapse | inherit

But you should either place the visibility attribute on the parent <g> element, or place it individually. The default value for the SVG attribute is inherit. So SVG will honor the visibility state of the element it is applied to regardless of its parent visibility state.

Upvotes: 5

Related Questions