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

Der SVG-Filterprimitive <feComposite> führt die Kombination von zwei Eingabebildern pixelweise im Bildraum durch, indem einer der Porter-Duff-Kompositionsoperationen verwendet wird: over, in, atop, out, xor, lighter oder arithmetic.

Die nachstehende Tabelle zeigt jede dieser Operationen mit einem Bild 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 ist.

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 im 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 im in-Attribut definierten Quellgrafik und der im in2-Attribut definierten Zielgrafik werden kombiniert.

lighter lighter operator

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

arithmetic arithmetic operator

Die arithmetic-Operation ist nützlich zur Kombination der Ausgabe von den <feDiffuseLighting>- und <feSpecularLighting>-Filtern mit Texturdaten. Wenn die arithmetic-Operation gewä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 Eingabebilds angeben, die auf in und in2 abgebildet sind.
  • k1, k2, k3, und k4 die Werte der Attribute mit demselben Namen.

Verwendungskontext

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

Attribute

  • in: Erstes Eingabewert für den angegebenen Filterprimitive.
  • in2: Zweites Eingabewert für den angegebenen 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 in 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, etc.), die ein Eingabe-SourceGraphic mit einem Bild des MDN-Logos kombinieren. Die Filter werden jeweils auf ein Kreis-Element angewendet, das dann als SourceGraphic verwendet wird.

Hinweis: BackgroundImage kann in modernen Browsern nicht als Kompositionsquelle verwendet werden, daher können wir keinen Filter definieren, der als eine der Quellen mit den Pixeln arbeitet, die sich zufällig unter dem Filter befinden. 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