SVG visibility Attribute
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" <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:
Please Login to comment...