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
Scalable Vector Graphics (SVG) 2
# VisibilityControl

浏览器兼容性

BCD tables only load in the browser

参见