« SVG Attribute reference home
The display
attribute lets you control the rendering of graphical or container elements.
A value of display="none"
indicates that the given element and its children will not be rendered. Any value other than none or inherit indicates that the given element will be rendered by the browser.
When applied to a container element, setting display
to none
causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none"
will never be rendered even if the child has a value for display
other than none
.
When the display
attribute is set to none
, then the given element does not become part of the rendering tree. It has implications for the <tspan>
, <tref>
, and <altglyph>
elements, event processing, for bounding box calculations and for calculation of clipping paths:
- If
display
is set tonone
on a<tspan>
,<tref>
, or<altglyph>
element, then the text string is ignored for the purposes of text layout. - Regarding events, if
display
is set tonone
, the element receives no events. - The geometry of a graphics element with
display
set tonone
is not included in bounding box and clipping paths calculations.
The display
attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting display: none on a <path>
element will prevent that element from getting rendered directly onto the canvas, but the <path>
element can still be referenced by a <textpath>
element; furthermore, its geometry will be used in text-on-a-path processing even if the <path>
has display: none.
The display
attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting display: none
on a child of a <mask>
will prevent the given child element from being rendered as part of the mask. Similarly, setting display: none
on a child of a <clippath>
element will prevent the given child element from contributing to the clipping path.
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet; see css display
for further information.
Usage context
Categories | Presentation attribute |
---|---|
Value | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition) |
Example
Elements
The following elements can use the display
attribute:
See also
- The
visibility
attribute css display