display

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.

Dieses Attribut kann mit jedem SVG-Element verwendet werden.

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

<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>