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 spezifiziert die Transparenz eines Objekts oder einer Gruppe von Objekten, das heißt, in welchem Maße der Hintergrund hinter dem Element überlagert wird.
Hinweis: Als Präsentationsattribut kann opacity
als CSS-Eigenschaft verwendet werden. Siehe die CSS opacity
Eigenschaft für weitere Informationen.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
<a>
<circle>
<ellipse>
<foreignObject>
<g>
<image>
<line>
<marker>
<path>
<polygon>
<polyline>
<rect>
<svg>
<switch>
<symbol>
<text>
<textPath>
<tspan>
<use>
Im Gegensatz zu fill-opacity
, stroke-opacity
, und stop-opacity
, die auf einzelne Operationen angewendet werden und während der Darstellung des Elements gerendert werden, wird opacity
auf ganze Objekte oder Gruppen angewendet und verhält sich mehr wie ein Nachbearbeitungsschritt auf dem gerenderten Bild des Objekts oder der Gruppe. Daher werden, wenn Sie sowohl opacity
als auch andere Transparenzattribute im selben Bereich haben, diese übereinandergelegt und bewirken, dass die Transparenz multipliziert wird.
Beispiel
<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>
Nutzungshinweise
Standardwert | 1 |
---|---|
Wert | <alpha-value> |
Animierbar | Ja |
<alpha-value>
-
Die einheitliche Einstellung der Transparenz, die auf ein gesamtes Objekt angewendet wird, als
<number>
. Jegliche Werte außerhalb des Bereichs von 0.0 (vollständig transparent) bis 1.0 (vollständig undurchsichtig) werden auf diesen Bereich beschränkt.
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # transparency |
Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |
Browser-Kompatibilität
BCD tables only load in the browser