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 上查看此页面 • 报告此内容的错误