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