display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

display="none" 表示该元素和它的子元素不会被渲染。而非 noneinherit 的值表示元素会被浏览器渲染。

当应用到容器元素时,将 display 设为 none 会导致容器与它所有的子元素不可见,如此看来,它在一组元素中表现地像一个元素组。这表示具有 display="none" 属性元素的所有子元素都不会被渲染,即使子元素的 display 并不是 none

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

  • 如果在 <tspan><tref> 元素中 display 的属性值被设为 none,则为了文字布局,文字字符串会被忽视掉。
  • 至于事件,如果 display 被设为 none 则该元素不接受任何事件。
  • 图形元素display 属性被设为 none 则不会被盒边界和路径剪裁计算中包含进去。

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

这个属性也能影响直接渲染到屏幕外的画布,比如遮罩或路径剪裁。因此,把 <mask> 元素的一个子元素设为 display="none" 将会阻止 <clipPath> 的子元素参与到路径剪裁中。

备注: 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.

示例

html
<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>
</svg>

使用说明

Default value inline
Value CSS Page type required

| | Animatable | Yes |

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

规范

Specification
CSS Display Module Level 3
# the-display-properties
Scalable Vector Graphics (SVG) 2
# VisibilityControl

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
display

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见