visibility

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Mit dem Attribut visibility können Sie die Sichtbarkeit grafischer Elemente steuern. Mit dem Wert hidden oder collapse ist das betreffende grafische Element unsichtbar.

Hinweis: Wenn das Attribut visibility bei einem Textelement auf hidden gesetzt ist, ist der Text unsichtbar, belegt aber bei der Berechnung des Textlayouts weiterhin Platz.

Abhängig vom Wert des Attributs pointer-events können grafische Elemente, deren Attribut visibility auf hidden gesetzt ist, weiterhin Events empfangen.

Hinweis: Als Präsentationsattribut hat visibility auch eine entsprechende CSS-Eigenschaft: visibility. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

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="none" />
  <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-Eigenschaft visibility des SVG-Bildpfads 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

Verwendungshinweise

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

visible: Dieser Wert gibt an, dass das Element gezeichnet wird.
hidden: Dieser Wert gibt an, dass das Element nicht gezeichnet wird. Es bleibt jedoch Teil des Rendering-Baums. Das heißt, es kann abhängig vom Attribut pointer-events Pointer-Events empfangen und abhängig vom Attribut tabindex den Fokus erhalten. Außerdem fließt es in die Berechnung der Begrenzungsbox und von Clipping-Pfaden ein und beeinflusst das Textlayout.
collapse: Dieser Wert entspricht hidden.