SVG/Filter/feComposite

Aus SELFHTML-Wiki
< SVG‎ | Filter
Wechseln zu: Navigation, Suche

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.[1]

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
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.[2]

Quellen[Bearbeiten]

  1. W3C: feCompositeElement
  2. http://apike.ca/prog_svg_filter_feComposite.html

Referenz[Bearbeiten]