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

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

 Die Bereiche der durch das Attribut in definierten Grafikquelle, die mit der durch das Attribut in2 definierten Zielgrafik überlappen, ersetzen die Zielgrafik.

out out operator

 Die Bereiche der durch das Attribut in definierten Grafikquelle, die außerhalb der durch das Attribut in2 definierten Zielgrafik liegen, werden angezeigt.

atop atop operator

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

 Die nicht überlappenden Bereiche der durch das Attribut in definierten Grafikquelle und der durch das Attribut in2 definierten Zielgrafik werden kombiniert.

lighter lighter operator

Die Summe der durch das Attribut in definierten Grafikquelle und der durch das Attribut in2 definierten Zielgrafik wird angezeigt.

arithmetic arithmetic operator

Die arithmetic-Operation ist nützlich, um die Ausgabe der Filter <feDiffuseLighting> und <feSpecularLighting> mit Texturdaten zu kombinieren. Wenn die arithmetic-Operation ausgewählt wird, wird jedes Ergebnispixel wie folgt berechnet: 

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

Dabei gilt:

  • i1 und i2 bezeichnen die entsprechenden Pixel-Kanalwerte des Eingabebildes, die mit in und in2 verknüpft sind.
  • k1, k2, k3 und k4 sind die Werte der gleichnamigen Attribute.

Verwendungskontext

KategorienPrimitives Filterelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
<animate>, <set>

Attribute

  • in: Erste Eingabe für das angegebene Filterprimitive.
  • in2: Zweite Eingabe für das angegebene Filterprimitive (funktioniert genauso wie das in-Attribut).
  • operator: over | in | out | atop | xor | lighter | arithmetic
  • k1, k2, k3, k4: Werte, die zur Berechnung des Ergebnispixels bei arithmetic-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

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