display
display 属性用于控制图形或容器元素的渲染。
值为 display="none" 表示给定的元素及其子元素将不会被渲染。任何非 none 或 inherit 的值都表示给定的元素将由浏览器渲染。
当应用于容器元素时，将 display 设置为 none 会使容器及其所有子元素都不可见；因此，它作为一个整体来作用于元素组。这意味着，任何 display="none" 元素的子元素即使具有不同于 none 的 display 值，也不会被渲染。
当 display 属性设置为 none 时，给定的元素不会成为渲染树的一部分。这对 <tspan> 元素、事件处理、边界框计算以及剪裁路径计算都有影响。
- 如果
display在<tspan>元素上设置为none，那么文本字符串在文本布局中将被忽略。 - 关于事件，如果
display设置为none，则该元素不接收任何事件。 display设置为none的 图形元素的几何形状不包含在边界框和剪裁路径计算中。
display 属性仅影响给定元素的直接渲染，而不会阻止元素被其他元素引用。例如，将其设置为 none 的 <path> 元素将阻止该元素直接渲染到画布上，但该 <path> 元素仍然可以被 <textPath> 元素引用；此外，即使该 <path> 的 display 值为 none，其几何形状也会在路径文本处理中使用。
此属性还影响直接渲染到离屏画布，例如蒙版或剪裁路径。因此，在 <mask> 的子元素上设置 display="none" 将阻止该子元素作为蒙版的一部分进行渲染。同样，在 <clipPath> 元素的子元素上设置 display="none" 将阻止该子元素对剪裁路径做出贡献。
注意： 作为演示属性，display 还有一个 CSS 属性对应物：display。当两者都被指定时，CSS 属性具有更高的优先级。
您可以将此属性与任何 SVG 元素一起使用。
示例
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>
用法说明
| 默认值 | inline |
|---|---|
| 值 | 请参阅 display |
| 可动画的 | 是 |
有关值的描述，请参阅 CSS display 属性。
规范
| 规范 |
|---|
| CSS Display Module Level 3 # the-display-properties |
| Scalable Vector Graphics (SVG) 2 # VisibilityControl |
浏览器兼容性
加载中…
另见
visibility属性- CSS
display属性