display

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 display-Attribut ermöglicht es Ihnen, die Darstellung von grafischen oder Container-Elementen zu steuern.

Ein Wert von display="none" zeigt an, dass das gegebene Element und seine Kinder nicht gerendert werden. Jeder andere Wert als none oder inherit gibt an, dass das gegebene Element vom Browser gerendert wird.

Wenn auf ein Container-Element angewendet, bewirkt das Setzen von display auf none, dass der Container und alle seine Kinder unsichtbar werden; es wirkt also auf Gruppen von Elementen als Gruppe. Das bedeutet, dass jedes Kind eines Elements mit display="none" niemals gerendert wird, selbst wenn das Kind einen anderen display-Wert als none hat.

Wenn das display-Attribut auf none gesetzt ist, wird das gegebene Element nicht Teil des Rendering-Baums. Dies hat Auswirkungen auf die <tspan>- und <tref>-Elemente, die Ereignisverarbeitung, die Berechnung von Begrenzungsrahmen und die Berechnung von Clipping-Pfaden:

Wenn display auf none auf ein <tspan>- oder <tref>-Element gesetzt ist, wird die Textzeichenkette für Layoutzwecke ignoriert.
In Bezug auf Ereignisse erhält das Element keine Ereignisse, wenn display auf none gesetzt ist.
Die Geometrie eines Grafikelements mit display auf none wird nicht in die Berechnung von Begrenzungsrahmen und Clipping-Pfaden einbezogen.

Das display-Attribut beeinflusst nur das direkte Rendering eines gegebenen Elements und verhindert nicht, dass Elemente von anderen Elementen referenziert werden. Beispielsweise verhindert das Setzen auf none bei einem <path>-Element, dass dieses Element direkt auf die Leinwand gerendert wird, aber das <path>-Element kann weiterhin von einem <textPath>-Element referenziert werden; zudem wird seine Geometrie im Text-auf-einem-Pfad-Verfahren verwendet, selbst wenn das <path>-Element einen display-Wert von none hat.

Dieses Attribut beeinflusst auch das direkte Rendering in Offscreen-Canvas, wie es bei Masken oder Clip-Pfaden vorkommt. Das Setzen von display="none" auf ein Kind eines <mask> verhindert daher, dass das gegebene Kindelement als Teil der Maske gerendert wird. Ebenso verhindert das Setzen von display="none" auf ein Kind eines <clipPath>-Elements, dass das gegebene Kindelement zum Clipping-Pfad beiträgt.

Hinweis: Als Präsentationsattribut hat display auch ein entsprechendes CSS-Eigenschafts-Pendant: display. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Sie können dieses Attribut mit jedem SVG-Element verwenden.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Here the yellow rectangle is displayed -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- Here the yellow rectangle is not displayed -->
  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect
    x="140"
    y="20"
    width="60"
    height="60"
    fill="yellow"
    display="none"></rect>
</svg>

Nutzungshinweise

Standardwert	`inline`
Wert	Siehe `display`
Animierbar	Ja

Für eine Beschreibung der Werte, siehe die CSS display-Eigenschaft.

Spezifikationen

Specification
CSS Display Module Level 3 # the-display-properties
Scalable Vector Graphics (SVG) 2 # VisibilityControl

Browser-Kompatibilität

Siehe auch

visibility-Attribut
CSS display-Eigenschaft