显示

display 属性允许您控制图形或容器元素的渲染。

display="none" 的值表示给定元素及其子元素将不会被渲染。除了 none 或 inherit 之外的任何值都表示给定元素将由浏览器渲染。

当应用于容器元素时，将 display 设置为 none 会导致容器及其所有子元素都不可见；因此，它作为一个组作用于元素组。这意味着即使子元素的 display 值不为 none，具有 display="none" 的元素的任何子元素也永远不会被渲染。

当 display 属性设置为 none 时，给定元素不会成为渲染树的一部分。它对 <tspan> 和 <tref> 元素、事件处理、边界框计算和剪辑路径计算都有影响。

• 如果在 <tspan> 或 <tref> 元素上将 display 设置为 none，则在文本布局过程中会忽略文本字符串。
• 关于事件，如果 display 设置为 none，则元素不会接收任何事件。
• display 设置为 none 的 图形元素 的几何形状不包含在边界框和剪辑路径计算中。

display 属性仅影响给定元素的直接渲染，而不会阻止其他元素引用这些元素。例如，将其在 <path> 元素上设置为 none 将阻止该元素直接渲染到画布上，但 <path> 元素仍然可以被 <textPath> 元素引用；此外，即使 <path> 的 display 值为 none，其几何形状也将用于路径上文本处理。

此属性还会影响到屏幕外画布的直接渲染，例如蒙版或剪辑路径中发生的渲染。因此，将 display="none" 设置为 <mask> 的子元素上将阻止给定子元素作为蒙版的一部分进行渲染。类似地，将 display="none" 设置为 <clipPath> 元素的子元素上将阻止给定子元素对剪辑路径做出贡献。

您可以将此属性与任何 SVG 元素一起使用。

html,
body,
svg {
  height: 100%;
}

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