SVG/Filter/feGaussianBlur

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

• 
• 
• 
• 
• 
• 

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.

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.

ansehen …

Weblinks

Siehe auch

• SVG/Tutorials/Licht und Schatten
• Referenz:SVG/Elemente/feGaussianBlur
• Schlagschatten mit CSS-Filter (filter: drop-shadow(...);)