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 auf einem Textelement auf hidden gesetzt ist, dann ist der Text unsichtbar, nimmt aber dennoch 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 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:

Hinweise zur Verwendung

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 Pointer-Ereignisse empfangen, abhängig vom pointer-events-Attribut, kann den Fokus erhalten, abhängig vom tabindex-Attribut, trägt zu Berechnungen des Begrenzungsrahmens und Zuschnitts bei und beeinflusst das Textlayout.

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 wechselt die CSS visibility des SVG-Bildpfads.

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