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