Sichtbarkeit

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.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

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

Abhängig vom Wert des Attributs pointer-events könnten Grafikelemente, die ihr visibility-Attribut auf hidden gesetzt haben, dennoch Ereignisse empfangen.

Hinweis: Als Präsentationsattribut hat visibility auch ein CSS-Eigenschaftsgegenstück: visibility. Wenn beide spezifiziert sind, hat die CSS-Eigenschaft Vorrang.

Elemente

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Verwendungshinweise

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

visible: Dieser Wert gibt an, dass das Element dargestellt wird.
hidden: Dieser Wert gibt an, dass das Element nicht dargestellt wird. Es ist zwar weiterhin Teil des Renderbaums, d.h. es kann je nach Attribut pointer-events Ereignisse empfangen, kann je nach Attribut tabindex den Fokus erhalten, trägt zu Berechnungen des Begrenzungsrahmens und der Pfadbeschneidung 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="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-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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

display-Attribut
CSS visibility-Eigenschaft

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden