display

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 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 Wert außer none oder inherit zeigt an, dass das gegebene Element vom Browser gerendert wird.

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

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

Wenn display bei einem <tspan>-Element auf none gesetzt ist, wird die Textzeichenfolge für Layoutzwecke ignoriert.
In Bezug auf Ereignisse: Wenn display auf none gesetzt ist, erhält das Element keine Ereignisse.
Die Geometrie eines Grafikelements mit display auf none wird nicht in die Berechnungen von Begrenzungsrahmen und Clipping-Pfaden einbezogen.

Das display-Attribut beeinflusst nur das direkte Rendering eines gegebenen Elements, verhindert jedoch nicht, dass Elemente von anderen Elementen referenziert werden. Zum Beispiel verhindert das Setzen auf none bei einem <path>-Element, dass es direkt auf der Leinwand gerendert wird, aber das <path>-Element kann immer noch von einem <textPath>-Element referenziert werden; zudem wird seine Geometrie bei der Text-auf-einem-Pfad-Verarbeitung verwendet, selbst wenn das <path> den display-Wert none hat.

Dieses Attribut beeinflusst auch das direkte Rendering in Offscreen-Leinwände, wie sie bei Masken oder Clipping-Pfaden auftreten. Das Setzen von display="none" auf ein Kind eines <mask> verhindert, 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-Eigenschaftsgegenstück: display. Wenn beides spezifiziert ist, 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>

Verwendungshinweise

Standardwert	`inline`
Wert	Siehe `display`
Animierbar	Ja

Für eine Beschreibung der Werte siehe bitte 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