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 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 bei einem Textelement auf hidden gesetzt ist, bleibt der Text unsichtbar, nimmt aber weiterhin Platz in den Textlayout-Berechnungen ein.

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

Hinweis: Als Präsentationsattribut hat visibility auch ein entsprechendes CSS-Eigenschafts-Pendant: visibility. Wenn beide angegeben 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 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 abhängig vom pointer-events-Attribut Zeigereignisse empfangen, abhängig vom tabindex-Attribut den Fokus erhalten, zu Berechnungen der Begrenzungsbox und Schnittwege beitragen und sich auf das Textlayout auswirken.

collapse

Dieser Wert entspricht 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-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