visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

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

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

Abhängig vom Wert des Attributs pointer-events können Grafikelemente, deren visibility-Attribut auf hidden gesetzt ist, dennoch Ereignisse empfangen.

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

Elemente

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

Hinweise zur Verwendung

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

visible: Dieser Wert gibt an, dass das Element gemalt wird.
hidden: Dieser Wert gibt an, dass das Element nicht gemalt wird. Es ist jedoch weiterhin Teil des Rendering-Baums, d.h. es kann Zeigerereignisse je nach pointer-events-Attribut empfangen, kann je nach tabindex-Attribut den Fokus erhalten, trägt zu Berechnungen der Begrenzungsrechtecke und Schnittwege 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-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

Specification
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

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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