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

Wenn das display-Attribut auf ein Container-Element angewendet wird und auf none gesetzt ist, führt dies dazu, dass der Container und alle seine Kinder unsichtbar sind; es wirkt also auf Gruppen von Elementen als eine Einheit. Dies 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. Das hat Auswirkungen auf die <tspan>- und <tref>-Elemente, die Verarbeitung von Ereignissen, die Berechnung des Begrenzungsrahmens und die Berechnung von Clipping-Pfaden:

  • Wenn display auf einem <tspan>- oder <tref>-Element auf none gesetzt ist, wird die Textzeichenkette für Layoutzwecke ignoriert.
  • Bezüglich Ereignissen gilt, dass ein Element keine Ereignisse empfängt, wenn display auf none gesetzt ist.
  • Die Geometrie eines grafischen Elements mit display="none" wird nicht in die Berechnung des Begrenzungsrahmens und der Clipping-Pfade einbezogen.

Das display-Attribut beeinflusst nur die direkte Darstellung eines gegebenen Elements, es verhindert jedoch nicht, dass Elemente von anderen Elementen referenziert werden. Zum Beispiel verhindert das Setzen von display="none" auf einem <path>-Element, dass dieses Element direkt auf die Leinwand gerendert wird. Allerdings kann das <path>-Element weiterhin von einem <textPath> referenziert werden; seine Geometrie wird sogar für die Verarbeitung von Text-auf-einem-Pfad verwendet, selbst wenn das <path> den display-Wert none hat.

Dieses Attribut beeinflusst auch die direkte Darstellung in Offscreen-Canvasen, wie sie bei Masken oder Clip-Pfaden vorkommt. Wenn z.B. display="none" auf einem Kind eines <mask>-Elements gesetzt wird, verhindert dies, dass das entsprechende Kindelement als Teil der Maske gerendert wird. Ebenso verhindert das Setzen von display="none" auf ein Kind eines <clipPath>-Elements, dass dieses 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.

Dieses Attribut kann mit jedem SVG-Element verwendet werden.

Beispiel

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>

Anwendungsnotizen

Standardwert inline
Wert Siehe display
Animierbar Ja

Für eine Beschreibung der Werte beziehen Sie sich bitte auf die CSS-display-Eigenschaft.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
display

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch