SVG/Filter/feGaussianBlur
Aus SELFHTML-Wiki
< SVG | Filter(Weitergeleitet von FeGaussianBlur)
Der primitive Filter feGaussianBlur erzeugt Schatten-, Licht- oder Unschärfeeffekte.[1]
Folgende Attribute sind nötig:
in
: EingangsgrafikstdDeviation
: Standardabweichung (Standardwert 0), positive oder negative Werte möglich, wenn 2 Werte eingegeben werden, gilt der erste für x-, der zweite 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>
Weblinks[Bearbeiten]
Quellen[Bearbeiten]
- ↑ W3C: feGaussianBlurElement
- ↑ apike.ca: feGaussianBlur(Live-Demo)
Siehe auch[Bearbeiten]
- SVG/Tutorials/Licht und Schatten
- Referenz:SVG/Elemente/feGaussianBlur
- Schlagschatten mit CSS-Filter (
filter: drop-shadow(...);
)
In der oberen Reihe wurde der Wert
stdDeviation
sukzessive erhöht, sodass 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 dem 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.