可見性

visibility 屬性允許您控制圖形元素的可見性。使用 hidden 或 collapse 值，當前圖形元素將不可見。

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

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

注意：作為表示屬性，visibility 可用作 CSS 屬性。有關更多資訊，請參閱 CSS visibility 屬性。

元素

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

使用說明

值 visible | hidden | collapse
預設值 visible
可動畫 是
visible

此值表示將繪製元素。

hidden

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

collapse

此值等於 hidden。

示例

示例 1

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

js
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");
});

結果

規範

規範
可縮放向量圖形 (SVG) 2
# 可見性控制

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱