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 Attribut visibility ermöglicht Ihnen die Kontrolle über die Sichtbarkeit von grafischen Elementen. Mit einem Wert von hidden oder collapse wird das aktuelle Grafikelement unsichtbar.

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

Abhängig vom Wert des Attributs pointer-events können grafische Elemente, die ihr visibility-Attribut auf hidden gesetzt haben, weiterhin Ereignisse empfangen.

Hinweis: Als Präsentationsattribut kann visibility als CSS-Eigenschaft verwendet werden. Siehe die CSS-Eigenschaft visibility für weitere Informationen.

Elemente

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

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 ist jedoch weiterhin Teil des Rendering-Baums, d. h., es kann Zeigereignisse je nach Attribut pointer-events empfangen, je nach Attribut tabindex den Fokus erhalten, trägt zur Berechnung der Begrenzungsrahmen und der Clipping-Pfade bei und beeinflusst das Textlayout.

collapse

Dieser Wert ist gleich hidden.

Beispiele

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

Beispiel 2

Das folgende Beispiel wechselt 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

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

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