<feComposite>
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 <feComposite>
SVG-Filterprimitive kombiniert zwei Eingabebilder pixelweise im Bildraum unter Verwendung einer der Porter-Duff-Compositing-Operationen: over
, in
, atop
, out
, xor
, lighter
oder arithmetic
.
Wie andere Filterprimitive verarbeitet es standardmäßig Farbkomponenten im linearRGB
-Farbraum. Sie können color-interpolation-filters
verwenden, um stattdessen sRGB
zu nutzen.
Die folgende Tabelle zeigt jede dieser Operationen anhand eines Bildes des MDN-Logos, das mit einem roten Kreis kombiniert wird:
Operation | Beschreibung |
---|---|
over |
Die durch das Attribut in definierte Grafikquelle
(das MDN-Logo) wird über die durch das Attribut in2
definierte Zielgrafik (den Kreis) gelegt.
Dies ist die Standardoperation, die angewendet wird, wenn keine oder eine nicht unterstützte Operation angegeben wird. |
in |
Die Bereiche der durch das Attribut in definierten
Grafikquelle, die mit der durch das Attribut in2
definierten Zielgrafik überlappen, ersetzen die Zielgrafik.
|
out |
Die Bereiche der durch das Attribut in definierten
Grafikquelle, die außerhalb der durch das Attribut in2
definierten Zielgrafik liegen, werden angezeigt.
|
atop |
Die überlappenden Bereiche der durch das Attribut in
definierten Grafikquelle ersetzen die Zielgrafik, die durch das
Attribut in2 definiert ist. Die Bereiche der Zielgrafik,
die nicht mit der Grafikquelle überlappen, bleiben unverändert.
|
xor |
Die nicht überlappenden Bereiche der durch das Attribut in
definierten Grafikquelle und der durch das Attribut in2
definierten Zielgrafik werden kombiniert.
|
lighter |
Die Summe der durch das Attribut in definierten
Grafikquelle und der durch das Attribut in2 definierten
Zielgrafik wird angezeigt.
|
arithmetic
|
Die result = k1*i1*i2 + k2*i1 + k3*i2 + k4 Dabei gilt: |
Verwendungskontext
Attribute
in
: Erste Eingabe für das angegebene Filterprimitive.in2
: Zweite Eingabe für das angegebene Filterprimitive (funktioniert genauso wie dasin
-Attribut).operator
:over
|in
|out
|atop
|xor
|lighter
|arithmetic
k1
,k2
,k3
,k4
: Werte, die zur Berechnung des Ergebnispixels beiarithmetic
-operator
-Filterprimitiven verwendet werden.
DOM-Schnittstelle
Dieses Element implementiert die SVGFECompositeElement
-Schnittstelle.
Beispiel
Dieses Beispiel definiert Filter für jede der unterstützten Operationen (over
, atop
, lighter
usw.), die eine Eingabe-SourceGraphic
mit einem Bild des MDN-Logos kombinieren. Die Filter werden jeweils auf ein Kreis-Element angewendet, das als die SourceGraphic
dient.
Hinweis: BackgroundImage
kann in modernen Browsern nicht als Compositing-Quelle verwendet werden, weshalb wir keinen Filter definieren können, der mit den unter dem Filter befindlichen Pixeln als Quelle kombiniert. Der hier verwendete Ansatz ist ein Workaround, da wir BackgroundImage
nicht verwenden können.
SVG
<svg
style="width:800px; height:400px; display: inline;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="imageOver">
<feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="over" />
</filter>
<filter id="imageIn">
<feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="in" />
</filter>
<filter id="imageOut">
<feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="out" />
</filter>
<filter id="imageAtop">
<feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="atop" />
</filter>
<filter id="imageXor">
<feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="xor" />
</filter>
<filter id="imageArithmetic">
<feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
<feComposite
in2="SourceGraphic"
operator="arithmetic"
k1="0.1"
k2="0.2"
k3="0.3"
k4="0.4" />
</filter>
<filter id="imageLighter">
<feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="lighter" />
</filter>
</defs>
<g transform="translate(0,25)">
<circle
cx="90px"
cy="80px"
r="70px"
fill="#c00"
style="filter:url(#imageOver)" />
<text x="80" y="-5">over</text>
</g>
<g transform="translate(200,25)">
<circle
cx="90px"
cy="80px"
r="70px"
fill="#c00"
style="filter:url(#imageIn)" />
<text x="80" y="-5">in</text>
</g>
<g transform="translate(400,25)">
<circle
cx="90px"
cy="80px"
r="70px"
fill="#c00"
style="filter:url(#imageOut)" />
<text x="80" y="-5">out</text>
</g>
<g transform="translate(600,25)">
<circle
cx="90px"
cy="80px"
r="70px"
fill="#c00"
style="filter:url(#imageAtop)" />
<text x="80" y="-5">atop</text>
</g>
<g transform="translate(0,240)">
<circle
cx="90px"
cy="80px"
r="70px"
fill="#c00"
style="filter:url(#imageXor)" />
<text x="80" y="-5">xor</text>
</g>
<g transform="translate(200,240)">
<circle
cx="90px"
cy="80px"
r="70px"
fill="#c00"
style="filter:url(#imageArithmetic)" />
<text x="70" y="-5">arithmetic</text>
</g>
<g transform="translate(400,240)">
<circle
cx="90px"
cy="80px"
r="70px"
fill="#c00"
style="filter:url(#imageLighter)" />
<text x="80" y="-5">lighter</text>
</g>
</svg>
Ergebnis
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # feCompositeElement |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- SVG-Filter-Primitive-Attribute
<filter>
<animate>
<set>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG-Tutorial: Filter-Effekte