<feComposite>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

Das <feComposite> SVG Filter-Primitive führt die Kombination von zwei Eingabebildern pixelweise im Bildraum mit einer der Porter-Duff-Kompositionstechniken aus: over, in, atop, out, xor, lighter oder arithmetic.

Wie andere Filter-Primitiven verarbeitet es die 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 mit einem Bild des MDN-Logos, das mit einem roten Kreis kombiniert wird:

Operation Beschreibung

over over operator

 Die Quellgrafik, die durch das in Attribut definiert ist (das MDN-Logo), wird über die Zielgrafik platziert, die durch das in2 Attribut (der Kreis) definiert ist.

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

in in operator

 Die Teile der Quellgrafik, die durch das in-Attribut definiert sind und die die Zielgrafik überschneiden, die im in2-Attribut definiert ist, ersetzen die Zielgrafik.

out out operator

 Die Teile der Quellgrafik, die durch das in-Attribut definiert sind und außerhalb der Zielgrafik fallen, die im in2-Attribut definiert ist, werden angezeigt.

atop atop operator

 Die Teile der Quellgrafik, die im in-Attribut definiert sind und die Zielgrafik überschneiden, die im in2-Attribut definiert ist, ersetzen die Zielgrafik. Die Teile der Zielgrafik, die nicht mit der Quellgrafik überlappen, bleiben unberührt.

xor xor operator

 Die nicht-überlappenden Regionen der Quellgrafik, die im in-Attribut definiert sind, und der Zielgrafik, die im in2-Attribut definiert ist, werden kombiniert.

lighter lighter operator

Die Summe der Quellgrafik, die im in-Attribut definiert ist, und der Zielgrafik, die im in2-Attribut definiert ist, wird angezeigt.

arithmetic arithmetic operator

Die arithmetic-Operation ist nützlich, um die Ausgabe der <feDiffuseLighting> und <feSpecularLighting> Filter mit Texturdaten zu kombinieren. Wenn die arithmetic-Operation gewählt ist, wird jedes Resultat- Pixel mit der folgenden Formel berechnet: 

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

wo:

  • i1 und i2 die entsprechenden Pixelkanal- werte des Eingabebildes bezeichnen, die zu in und in2 zugeordnet sind
  • k1, k2, k3, und k4 die Werte der Attribute mit demselben Namen bezeichnen.

Verwendungskontext

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

Attribute

  • in: Erstes Eingabewert für das gegebene Filter-Primitive.
  • in2: Zweites Eingabewert für das gegebene Filter-Primitive (funktioniert wie das in-Attribut).
  • operator: over | in | out | atop | xor | lighter | arithmetic
  • k1, k2, k3, k4: Werte, die zur Berechnung des Ergebnis-Pixels in arithmetic operator-Filter-Primitiven 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, etc.), die eine Eingabe SourceGraphic mit einem Bild des MDN-Logos zusammensetzen. Die Filter werden jeweils auf ein Kreiselement angewendet, das dann als SourceGraphic verwendet wird.

Hinweis:>BackgroundImage kann in modernen Browsern nicht als Zusammensetzungsquelle verwendet werden, daher können wir keinen Filter definieren, der mit beliebigen Pixeln, die zufällig unter dem Filter liegen, als eine der Quellen zusammensetzt. Der hier gewählte Ansatz ist eine Umgehungslösung, 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