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.
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...