The display attribute lets you control the rendering of graphical or container elements.

display 属性让你可以控制图形元素或容器元素的渲染。

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:

display属性被设为none的元素不会成为渲染树的一部分。它涉及到<tspan>, <tref>, 和 <altGlyph>元素、用于盒边界与路径剪裁计算的事件处理。

  • If display is set to none on a <tspan>, <tref>, or <altGlyph> element, then the text string is ignored for the purposes of text layout.

如果在<tspan>, <tref>, 或<altGlyph>元素中display的属性值被设为none,则为了文字布局,文字字符串会被忽视掉。

  • Regarding events, if display is set to none, the element receives no events.


  • The geometry of a graphics element with display set to none 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 it to 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 a display value of none.

display属性只影响能被直接渲染的元素,尽管它不能防止该元素被其他元素参考。例如:将{SVGElement("path")}}元素设为 none,会使得该元素不会被直接渲染到 canvas 上,但是<textPath>元素依旧会参考<path>。此外,即便{SVGElement("path")}}的displaynone,它的形状在处理路径上的文本时仍然会被用到。

This 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.


Note: As a presentation attribute, display can be used as a CSS property. See css display for further information.

As a presentation attribute, it can be applied to any element.


<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Here the yellow rectangle is displayed -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- Here the yellow rectangle is not displayed -->
  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect>

Usage notes

Default value inline
Value Error: could not find syntax for this item
Animatable Yes

For a description of the values, please refer to the css display property.


Scalable Vector Graphics (SVG) 2
# VisibilityControl

Browser compatibility

BCD tables only load in the browser

See also