Open In App

SVG visibility Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads