可见性

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 表格仅在浏览器中加载

另请参阅