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

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

Der primitive Filter feGaussianBlur erzeugt Schatten-, Licht- oder Unschärfeeffekte.[1]

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari


Folgende Attribute sind nötig:

  • in: Eingangsgrafik
  • stdDeviation: Abweichung (Standardwert 0), positive oder negative Werte möglich, wenn 2 Werte eingegeben werden, gilt der erste für x, der 2. für y-Koordinaten.[2]
Beachten Sie: Wenn Sie hohe Werte für stdDeviation verwenden, sollten Sie den Filterbereich entsprechend groß festlegen, da der Effekt von feGaussianBlur viel Raum benötigt.
Beispiel ansehen …
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
    <filter id="f2" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <filter id="f3" x="0" y="0" >
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
    <filter id="f4" x="-20%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="out1" />
      <feBlend in="SourceGraphic" in2="out1" mode="darken" />
    </filter>
    <filter id="f5" x="-20%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="out1" />
      <feOffset in="out1" dx="5" dy="5" result="out2" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <filter id="f6">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
      <feOffset dx="5" dy="5" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <image x="10" y="10" width="200px" height="200px" alt="bild"
    xlink:href="Lauf-1.jpg">
  </image>	
  <image x="230" y="10" width="200px" height="200px" filter="url(#f1)"
    xlink:href="Lauf-1.jpg">
  </image>
Das Bild auf der linken Seite hat keinen Filter.
In der oberen Reihe wurde der Wert stdDeviation sukzessive erhöht, so dass das Bild immer unschärfer wird.

Unten links wurde zusätzlich feBlend verwendet, um den Output von feGaussianBlur mit dem Quellbild zu verschmelzen.

Unten in der Mitte wird ein Schatten erzeugt. Dazu wird zuerst eine Unschärfe auf den Alphakanal des Bildes erzeugt. Dann wird dieser (schwarze) Output, also der Schatten, mit Hilfe von feOffset verschoben. Zuletzt wird das Quellbild durch feMerge mit dem Schatten vereinigt.

Weblinks[Bearbeiten]

Quellen[Bearbeiten]

  1. W3C: feGaussianBlurElement
  2. apike.ca: feGaussianBlur(Live-Demo)

Siehe auch[Bearbeiten]