1. 面向开发者的 Web 技术
  2. SVG：可缩放矢量图形
  3. 参考
  4. SVG 属性参考
  5. display

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

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

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

display 属性被设为 none 的元素不会成为渲染树的组成部分。它涉及到 <tspan> 元素、事件处理、边界框计算和裁剪路径计算：

  • 如果将 <tspan> 元素的 display 设置为 none，则文本字符串在文本布局时将被忽略。
  • 至于事件，如果 display 被设为 none 则该元素不接受任何事件。
  • 图形元素的 display 属性被设为 none，则其几何形状不会被边界框和剪裁路径计算中包含进去。

display 属性只影响能被直接渲染的元素，但不会阻止其他元素对其进行引用。例如：将 <path> 元素设为 none，会使得该元素不会被直接渲染到画布（canvas）上，但是 <textPath> 元素依旧可以引用 <path>。此外，即便 <path> 的 display 值为 none，其几何形状仍会用于路径文本处理。

该属性同样影响直接渲染到离屏画布的情况，例如使用蒙版或剪裁路径时。因此，把 <mask> 元素的一个子元素设为 display="none" 将会阻止 <clipPath> 的子元素参与到路径剪裁中。

备注：作为表现属性，display 也有一个对应的 CSS 属性：display。当两者都被指定时，CSS 属性优先。

你可以将此属性用于任何 SVG 元素。

示例

html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 此处显示黄色矩形 -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- 此处未显示黄色矩形 -->
  <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>

使用说明

默认值 inline
值 参见 display
动画性 是

有关这些值的描述，请参阅 CSS display 属性。

规范

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

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content