顯示

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>