Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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]