visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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
<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

Siehe auch