SVG/Element/feComposite

Das feComposite-Element kombiniert zwei Eingangsgrafiken.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
filter

erlaubte Inhalte

animate, set

Attribute

Name	Inhalt	Standardwert	Bedeutung
in	CDATA		Eingangsgrafik
in2	CDATA		zweite Eingangsgrafik
operator	over, in, out, atop, xor, arithmetic		Art der Überlagerung
k1, k2, k3, k4	NUMBER		Werte bei operator="arithmetic"

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

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

Siehe auch

• SVG/Tutorials/Filter

Weblinks

• W3C (Spezifikation): feCompositeElement
• wikibooks.org: Urfilter_feComposite

Live-Beispiel

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" 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" 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" 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" 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" 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" href="wolke.png" result="img" />
    <feComposite operator="arithmetic" in="SourceGraphic" in2="img" k1="0" k2=".5" k3=".7" k4="0" />
  </filter>
</defs>

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