<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 Filter-Primitive kombiniert zwei Eingabebilder pixelweise im Bildraum mit einer der Porter-Duff-Kompositionsoperationen: over, in, atop, out, xor, lighter oder arithmetic.

Wie andere Filter-Primitives verarbeitet es Farbkomponenten standardmäßig im linearRGB Farbraum. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu verwenden.

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 in Attribut definierte Quellgrafik (das MDN-Logo) wird über die durch das in2 Attribut definierte Zielgrafik (der Kreis) gelegt.

Dies ist die Standardoperation, die verwendet wird, wenn keine Operation oder eine nicht unterstützte Operation angegeben wird.

in in operator

 Die Teile der durch das in Attribut definierten Quellgrafik, die die im in2 Attribut definierte Zielgrafik überlappen, ersetzen die Zielgrafik.

out out operator

 Die Teile der durch das in Attribut definierten Quellgrafik, die außerhalb der im in2 Attribut definierten Zielgrafik liegen, werden angezeigt.

atop atop operator

 Die Teile der durch das in Attribut definierten Quellgrafik, die die im in2 Attribut definierte Zielgrafik überlappen, ersetzen die Zielgrafik. Die Teile der Zielgrafik, die nicht mit der Quellgrafik überlappen, bleiben unberührt.

xor xor operator

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

lighter lighter operator

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

arithmetic arithmetic operator

Die arithmetic Operation ist nützlich zum Kombinieren der Ausgaben von <feDiffuseLighting> und <feSpecularLighting> Filtern mit Texturdaten. Wenn die arithmetic Operation ausgewählt wird, wird jedes Ergebnispixel mit der folgenden Formel berechnet: 

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

wobei:

  • i1 und i2 die entsprechenden Pixelkanalwerte des Eingabebildes anzeigen, die zu in und in2 zugeordnet sind
  • k1, k2, k3, und k4 die Werte der Attribute mit demselben Namen angeben.

Verwendungskontext

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

Attribute

  • in: Erste Eingabe für das gegebene Filter-Primitive.
  • in2: Zweite Eingabe für das gegebene Filter-Primitive (funktioniert genauso wie das in Attribut).
  • operator: over | in | out | atop | xor | lighter | arithmetic
  • k1, k2, k3, k4: Werte, die für die Berechnung des Ergebnispixels im arithmetic operator Filter-Primitive 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 Kreiselement angewendet, das dann als SourceGraphic verwendet wird.

Note: BackgroundImage kann in modernen Browsern nicht als Kompositionsquelle verwendet werden, daher können wir keinen Filter definieren, der unter der Annahme-Ebene liegende Pixel als eine der Quellen verwendet. Der hier angewandte 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

Siehe auch