opacity

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 opacity-Attribut gibt die Transparenz eines Objekts oder einer Gruppe von Objekten an, das heißt, das Maß, in dem der Hintergrund hinter dem Element überlagert wird.

Hinweis: Als Präsentationsattribut hat opacity auch ein entsprechendes CSS-Eigenschaftsgegenstück: opacity. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Im Gegensatz zu fill-opacity, stroke-opacity und stop-opacity, die auf einzelne Operationen angewendet werden und während des Renderns des Elements dargestellt werden, wird opacity auf ganze Objekte oder Gruppen angewendet und wirkt wie eine Nachbearbeitungsoperation auf das gerenderte Bild des Objekts oder der Gruppe. Daher werden, wenn Sie sowohl opacity als auch die anderen Opazitätsattribute im selben Bereich haben, diese übereinandergelegt und führen dazu, dass die Opazität multipliziert wird.

Beispiel

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" style="stop-color:skyblue;" />
      <stop offset="100%" style="stop-color:seagreen;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>

Verwendungshinweise

Standardwert 1
Wert <alpha-value>
Animierbar Ja
<alpha-value>

Die einheitliche Opazitätseinstellung, die auf ein gesamtes Objekt angewendet werden soll, als <number>. Alle Werte außerhalb des Bereichs von 0,0 (vollständig transparent) bis 1,0 (vollständig opak) werden auf diesen Bereich begrenzt.

Spezifikationen

Specification
CSS Color Module Level 4
# propdef-opacity
Scalable Vector Graphics (SVG) 2
# ObjectAndGroupOpacityProperties

Browser-Kompatibilität

Siehe auch