The visibility
attribute lets you control the visibility of graphical elements. With a value of hidden
or collapse
the current graphics element is invisible.
visibility
attribute is set to hidden
on a text element, then the text is invisible but still takes up space in text layout calculations.Depending on the value of attribute pointer-events
, graphics elements which have their visibility
attribute set to hidden
still might receive events.
Note: As a presentation attribute, visibility
can be used as a CSS property. See the css visibility
property for more information.
As a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>
, <altGlyph>
, <audio>
, <canvas>
, <circle>
, <ellipse>
, <foreignObject>
, <iframe>
, <image>
, <line>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
, <tspan>
, <video>
html, body, svg { height: 100%; }
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" visibility="hidden"/> </g> </svg>
Usage notes
Value | visible | hidden | collapse |
---|---|
Default value | visible |
Animatable | Yes |
visible
- This value indicates that the element will be painted.
hidden
- This value indicates that the element will not be painted. Though it is still part of the rendering tree, i.e. it may receive pointer events depending on the
pointer-events
attribute, may receive focus depending on thetabindex
attribute, contributes to bounding box calculations and clipping paths, and does affect text layout. collapse
- This value is equal to
hidden
.
Example
The following example toggles the CSS visibility
of the SVG image path.
HTML
<button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="button-icon"> <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" class="invisible" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> <span> click me </span> </button>
CSS
svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; }
JavaScript
document.querySelector("button").addEventListener("click", function (evt) { this.querySelector("svg > path:nth-of-type(1)").classList.toggle("invisible"); this.querySelector("svg > path:nth-of-type(2)").classList.toggle("invisible"); });
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1) The definition of 'visibility' in that specification. |
Recommendation | CSS definition of the property |
Scalable Vector Graphics (SVG) 2 The definition of 'visibility' in that specification. |
Candidate Recommendation | Mainly refers to CSS 2.1 |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'visibility' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
visibility | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown
See also
display
attributecss visibility