SVG/Tutorials/Filter/feComposite

Der primitive Filter feComposite kombiniert zwei Eingangsgrafiken, wobei entweder die Porter-Duff-Kompositionsmethode (over, in, atop, out, xor) oder eine komponentenweise arithmetische Operation verwendet wird.

Beispiel ansehen …

<defs>
  <filter id="compOver" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" xlink:href="wolke.png" result="img" />
    <feComposite operator="over" in="SourceGraphic" in2="img" />
  </filter>

  <filter id="compIn" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" xlink:href="wolke.png" result="img" />
    <feComposite operator="in" in="SourceGraphic" in2="img" />
  </filter>
  
  <filter id="compOut" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" xlink:href="wolke.png" result="img" />
    <feComposite operator="out" in="SourceGraphic" in2="img" />
  </filter>

  <filter id="compAtop" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" xlink:href="wolke.png" result="img" />
    <feComposite operator="atop" in="SourceGraphic" in2="img" />
  </filter>
  
  <filter id="compXor" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" xlink:href="wolke.png" result="img" />
    <feComposite operator="xor" in="SourceGraphic" in2="img" />	
  </filter>
  
  <filter id="compArith" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" xlink:href="wolke.png" result="img" />
    <feComposite operator="arithmetic" in="SourceGraphic" in2="img" k1="0" k2=".5" k3=".7" k4="0" />
  </filter>
</defs>

<use xlink:href="#doppeldecker" transform="translate(10,50)" filter="url(#compOver)" />

In den Beispielen werden zwei Grafiken mit feComposite zu einer zusammengefasst: Der Doppeldecker ist eine Vektorgrafik, die mit use aufgerufen wird, die Wolke ist eine Rastergrafik, die mit feImage aufgerufen wird. Das operator-Attribut wird mit den möglichen Werten belegt.

Folgende Attribute sind möglich:

• in: Eingangsgrafik
• in2: input des 2. Bildes, funktioniert wie in

• operator: legt die Kombinationsmethode fest
  • over: die Bilder werden einfach übereinandergelegt (Standardwert; enspricht feMerge)
  • in: wählt einen Anteil von A aus, wenn b nicht transparent ist.
  • out: wählt einen Anteil von A aus, wenn b transparent ist.
  • atop: fügt einen Anteil von A zu B hinzu, wenn b nicht transparent ist.
  • xor: ist ein anteiliges entweder oder von A und B.
  • arithmetic: Die Attribute sind nur für den Operator 'arithmetic' anwendbar und stellen die dafür notwendigen Parameter bereit:
    • k1:
    • k2:
    • k3:
    • k4:

Auf apike.ca finden Sie weitere Beispiele, wie sich zwei Grafiken übereinander legen lassen.

Quellen

• wikibooks.org: Urfilter_feComposite

Referenz

• SVG/Elemente/feComposite