Skip to content
Related Articles

Related Articles

SVG visibility Attribute
  • Last Updated : 03 Nov, 2020

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :