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

Der <feComposite> SVG Filter-Primitive kombiniert zwei Eingabebilder pixelweise im Bildraum unter Verwendung einer der Porter-Duff-Kompositionsoperationen: over, in, atop, out, xor, lighter oder arithmetic.

Wie andere Filter-Primitive verarbeitet es Farbbestandteile standardmäßig 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 zusammengesetzt wird:

Operation Beschreibung

over über Operator

 Die durch das in Attribut definierte Ausgangsgrafik (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 Ausgangsgrafik, die die in dem `in2` Attribut definierte Zielgrafik überlappen, ersetzen die Zielgrafik.

out out Operator

 Die Teile der durch das `in` Attribut definierten Ausgangsgrafik, die außerhalb der in dem `in2` Attribut definierten Zielgrafik liegen, werden angezeigt.

atop atop Operator

 Die Teile der im `in` Attribut definierten Ausgangsgrafik, die die in dem `in2` Attribut definierte Zielgrafik überlappen, ersetzen die Zielgrafik. Die Teile der Zielgrafik, die nicht mit der Ausgangsgrafik überlappen, bleiben unberührt.

xor xor Operator

 Die nicht überlappenden Regionen der im `in` Attribut definierten Ausgangsgrafik und der im `in2` Attribut definierten Zielgrafik werden kombiniert.

lighter lighter Operator

Die Summe der im `in` Attribut definierten Ausgangsgrafik und der im `in2` Attribut definierten Zielgrafik 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 wird, wird jedes Ergebnis-Pixel mit der folgenden Formel berechnet: 

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

wobei:

  • `i1` und `i2` die entsprechenden Pixelkanalwerte des Eingabebildes darstellen, die jeweils auf in und in2 abgebildet werden
  • k1, k2, k3, und k4 die Werte der Attribute mit dem gleichen Namen angeben.

Nutzungskontext

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 gleich 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, usw.), die ein Eingabe-SourceGraphic mit einem Bild des MDN-Logos zusammensetzen. Die Filter werden jeweils auf ein Kreiselement angewendet, das dann als SourceGraphic dient.

Hinweis: BackgroundImage kann nicht als Kompositionsquelle in modernen Browsern verwendet werden, daher können wir keinen Filter definieren, der mit beliebigen Pixeln unterhalb des Filters als eine der Quellen arbeitet. Der hier gewählte Ansatz ist ein Workaround, weil wir BackgroundImage nicht verwenden können.

SVG

html
<svg
  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="#cc0000"
      filter="url(#imageOver)" />
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageIn)" />
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOut)" />
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageAtop)" />
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageXor)" />
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageArithmetic)" />
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      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