visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das visibility-Attribut ermöglicht es Ihnen, die Sichtbarkeit von grafischen Elementen zu steuern. Mit einem Wert von hidden oder collapse wird das aktuelle Grafikelement unsichtbar.

Hinweis: Wenn das visibility-Attribut auf einem Textelement auf hidden gesetzt ist, ist der Text unsichtbar, nimmt aber dennoch Platz in den Textlayout-Berechnungen ein.

Je nach Wert des Attributs pointer-events können Grafikelemente, deren visibility-Attribut auf hidden gesetzt ist, dennoch Ereignisse empfangen.

Hinweis: Als Präsentationsattribut kann visibility als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter der CSS-Eigenschaft visibility.

Elemente

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Anwendungsnotizen

Wert	`visible` \| `hidden` \| `collapse`
Standardwert	`visible`
Animierbar	Ja

visible: Dieser Wert zeigt an, dass das Element gezeichnet wird.
hidden: Dieser Wert zeigt an, dass das Element nicht gezeichnet wird. Es ist jedoch weiterhin Teil des Rendering-Baums, d.h., es kann Zeigerereignisse empfangen, je nach Attribut pointer-events, Fokus empfangen, je nach Attribut tabindex, trägt zu Berechnungen der Begrenzungsrahmen und Clipping-Pfade bei und beeinflusst das Textlayout.
collapse: Dieser Wert entspricht hidden.

Beispiele

Beispiel 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>

Beispiel 2

Das folgende Beispiel schaltet die CSS-visibility des SVG-Bildpfades um.

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

display-Attribut
visibility