SVG/Element/feComposite
Aus SELFHTML-Wiki
< SVG | Element(Weitergeleitet von SVG/Tutorials/Filter/feComposite)
Das feComposite-Element kombiniert zwei Eingangsgrafiken.
- Syntax
- Start-Tag: notwendig
- End-Tag: ggf. notwendig
- Elternelemente
- Darf vorkommen in:
filter - erlaubte Inhalte
- animate, set
| 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
Weblinks
- W3C (Spezifikation): feCompositeElement
- wikibooks.org: Urfilter_feComposite
Grundformen
- Struktur und Gruppierungen
- Metadaten
- Text
- weitere Elemente
- Animationen
- Beschneidungen und Masken
- Filter
- filter
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feDistantLight
- feDropShadow
- feFlood
- feFuncA
- feFuncB
- feFuncG
- feFuncR
- feGaussianblur
- feImage
- feMerge
- feMergeNode
- feMorphology
- feOffset
- fePointLight
- feSpecularLighting
- feSpotLight
- feTile
- feTurbulence
- Muster und Verläufe
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.
