visibility

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

visibility 屬性可用於控制圖形元素的可見性。當值為 hidden 或 collapse 時，當前圖形元素將不可見。

注意： 如果在文字元素上將 visibility 屬性設定為 hidden，則文字將不可見，但在文字佈局計算中仍會佔用空間。

根據 pointer-events 屬性的值，visibility 屬性設定為 hidden 的圖形元素可能仍然會接收事件。

注意： 作為演示屬性，visibility 還有一個對應的 CSS 屬性：visibility。當兩者都指定時，CSS 屬性具有優先權。

元素

你可以將此屬性與以下 SVG 元素一起使用

用法說明

值	`visible` \| `hidden` \| `collapse`
預設值	`visible`
可動畫的	是

visible: 此值表示元素將被繪製。
hidden: 此值表示元素將不會被繪製。儘管它仍然是渲染樹的一部分，也就是說，它可能根據 pointer-events 屬性接收指標事件，可能根據 tabindex 屬性接收焦點，並且會影響邊界框計算和剪裁路徑，並且確實會影響文字佈局。
collapse: 此值等於 hidden。

示例

示例 1

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="10"
    y="10"
    width="200"
    height="100"
    stroke="black"
    stroke-width="5"
    fill="transparent" />
  <g stroke="seagreen" stroke-width="5" fill="skyblue">
    <rect x="20" y="20" width="80" height="80" visibility="visible" />
    <rect x="120" y="20" width="80" height="80" visibility="hidden" />
  </g>
</svg>

示例 2

以下示例切換 SVG 影像路徑的 CSS visibility。

HTML

html

<button id="nav-toggle-button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    class="button-icon">
    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
    <path
      d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
      class="invisible" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
  <span> click me </span>
</button>

CSS

css

svg {
  display: inline !important;
}
span {
  vertical-align: 50%;
}
button {
  line-height: 1em;
}
.invisible {
  visibility: hidden;
}

JavaScript

const button = document.querySelector("button");
button.addEventListener("click", (evt) => {
  button
    .querySelector("svg > path:nth-of-type(1)")
    .classList.toggle("invisible");
  button
    .querySelector("svg > path:nth-of-type(2)")
    .classList.toggle("invisible");
});

結果

規範

規範
CSS Display Module Level 3 # visibility
Scalable Vector Graphics (SVG) 2 # VisibilityControl

瀏覽器相容性

另見

display 屬性
CSS visibility 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 4 月 16 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤