display（显示）

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

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

应用于容器元素时，设置display为none使容器及其所有子项不可见; 因此，它作用于一组元素。这意味着，设置有display="none"的元素的任何子元素都不会被渲染，即使他们的display属性有一个none以外的值。

当display属性设置为none时，给定的元素不会成为渲染树的一部分。它影响<tspan>，<tref>与<altglyph>元素，事件处理过程，边框计算和剪切路径的计算：

• 如果在<tspan>，<tref>或<altglyph>元素中将display设置为none，则为了文本布局的目的，文本字符串将被忽略。

• 关于事件，如果display设置为none，则该元素不会收到事件。

• display设置为none的图形元素的几何不包含在边界框和剪切路径计算中。

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

该display属性还会影响到屏幕外的画布上的直接渲染，例如使用蒙版或剪辑路径。因此，为<mask>元素的子元素设置display: none将防止给定的子元素作为掩码的一部分被渲染。类似地，为<clippath>元素

的子元素设置display: none将防止给定的子元素对裁剪路径产生影响。

作为一个表现属性，它也可以直接在CSS样式表中作为属性使用; 查看css display的更多信息。

用法上下文

实例

适用元素

以下元素可以使用该display属性：

• Graphics elements »

• 文本内容元素»

• <svg>

• <g>

• <switch>

• <a>

• <foreignobject>