SVG visibility Attribute

Last Updated : 31 Mar, 2022

The visibility attribute allows you to control the visibility of graphical elements. It has effect only on the following elements <a>, <altGlyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignObject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, <tspan>, <video>

Syntax:

visibility = visible | hidden | collapse

Attribute Values: The visibility attribute accepts the values mentioned above and described below

visible: This value indicates that the element will be visible.
hidden: This value indicates that the element will not be visible.
collapse: This value is equivalent to hidden.

Example 1: Below is the example that illustrates the use of the visibility attribute.

HTML

Output:

Example 2: Below is the example that illustrates the use of the visibility attribute.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color:green; font-size:60px;">
        GeeksforGeeks
    </h1>

    <svg viewBox="0 0 620 520" 
        xmlns="http://www.w3.org/2000/svg">
        
        <rect x="10" y="10" width="200" 
            height="100" stroke="green" 
            stroke-width="5" fill="transparent" />

        <g stroke="seagreen" stroke-width="5" 
            fill="lightgreen">
            
            <rect x="20" y="20" width="80" 
                height="80" visibility="hidden" />
            
            <rect x="120" y="20" width="80" 
                height="80" visibility="visible" />
        </g>
    </svg>

</body>

</html>

Output:

SVG from Attribute

thacker_shahid

Improve

Article Tags :

SVG visibility Attribute

Similar Reads

SVG Elements

SVG Properties

SVG Attributes

Thank You!

What kind of Experience do you want to share?