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/feBlend

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

Der primitive Filter feBlend kann eine Komposition aus zwei Eingangsgrafiken erzeugen, indem sie pixelweise miteinander zur Ausgabe vermischt oder überblendet werden.[1]

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel ansehen …
    <filter id="blend1">
      <feTurbulence in="SourceGraphic"
         baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="normal" />
    </filter>

    <filter id="blend2">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="screen" />
    </filter>
In diesem Beispiel werden mit dem Filter feTurbulence wolkenähnliche Texturen erzeugt. Diese werden dann mit dem feBlend-Filter mit der Eingangsgrafik zusammengelegt.

Folgende Attribute sind möglich:

  • in: Eingangsgrafik
  • in2: input des 2. Bildes, funktioniert wie in
  • mode: Blend-Modus
    • normal: die Bilder werden einfach übereinandergelegt (Standardwert; enspricht feMerge)
    • darken: vergleicht die 2 Farben und wählt die dunklere
    • lighten: vergleicht die 2 Farben und wählt die hellere
    • multiply: vervielfältigt die Farben; das Ergebnis ist immer dunkler (Jede Farbe mal schwarz ist immer schwarz; jede Farbe mal weiß ist die Ausgangsfarbe)
    • screen: vervielfältigt die invertierten Farben, das Ergebnis ist immer heller
Überblenden von Grafiken ansehen …
<filter id="Blend" x
    filterUnits="userSpaceOnUse"
    x="0" y="0" width="600" height="450">
  <feImage id="fi1" xlink:href="Lauf-1.jpg"
    x="0" y="0" width="450" height="450" result="out1" />
  <feImage id="fi2" xlink:href="Flugzeug.png"
    x="20" y="20" width="160" height="120" result="out2" />
  <feBlend id="fb" in="out1" in2="out2" mode="multiply">
    <animate attributeName="mode"
        values="normal;screen;darken;lighten"
        begin="1s"
        dur="9s"
        repeatCount="indefinite" />
  </feBlend>
</filter>

<rect x="100" y="100" width="450" height="450" filter="url(#Blend)"/>
In diesem Beispiel werden zwei Grafiken mit dem feBlend-Filter zusammengelegt. Das Element wird mit SMIL animiert, wobei sich die Werte des mode-Attributs alle 2 Sekunden ändern.
Beachten Sie: Die Animation funktioniert nicht im Internet Explorer.

Auf apike.ca können Sie sich ansehen, wie sich zwei Grafiken übereinander legen lassen.[2]

Quellen[Bearbeiten]

  1. W3C: feBlendElement
  2. apike.ca: feBlend-Filter

Referenz[Bearbeiten]