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 Ihnen die Kontrolle über die Sichtbarkeit von grafischen Elementen. 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 trotzdem Platz in 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 ein entsprechendes CSS-Eigenschaftsgegenstück: visibility. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Elemente

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

Nutzungshinweise

Wert visible | hidden | collapse
Standardwert visible
Animierbar Ja
visible

Dieser Wert zeigt an, dass das Element dargestellt wird.

hidden

Dieser Wert zeigt an, dass das Element nicht dargestellt wird. Es ist jedoch weiterhin Teil des Rendering-Baums, d.h. es kann möglicherweise Zeigerereignisse empfangen, abhängig vom pointer-events-Attribut, kann den Fokus erhalten, abhängig vom tabindex-Attribut, trägt zu Berechnungen des Begrenzungsrahmens 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 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

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

Siehe auch