Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 14

14.8 feGaussianBlur

Der primitive Filter feGaussianBlur, der sogenannte "Gaussche Weichzeichner", verwischt ein Input-Bild. Es wird also eine Unschärfe erzeugt.

Durch das Attribut stdDeviation geben Sie die Stärke oder Ausdehnung der Unschärfe in Form einer Zahl an. Wenn Sie zwei Werte für stdDeviation verwenden, bezieht sich der erste Wert auf die Ausdehnung der Unschärfe entlang der x-Achse und der zweite Wert auf die Ausdehnung der Unschärfe entlang der y-Achse.
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 Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Der primitive Filter feGaussianBlur</title>
  <desc>
    Beispiele für die Verwendung von feGaussianBlur
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
    ]]>
    </style>
    <symbol id="smilie">
      <desc>ein lachendes Smilie</desc>
      <circle id="gesicht" cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle id="auge-links" cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle id="auge-rechts" cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line id="nase" x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
        stroke="black" fill="none" stroke-width="2" />
    </symbol>

<!-- 6 Filter mit feGaussianBlur -->
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation=".5" />
    </filter>
    <filter id="f2">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
    <filter id="f3" x="-20%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5,.5" />
    </filter>
    <filter id="f4" x="-20%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceGraphic" stdDeviation=".5,1.5" />
    </filter>
<!-- zusätzlich mit feBlend, feOffset und feMerge -->
    <filter id="f5" 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="f6" x="-20%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />
      <feOffset in="out1" dx="2" dy="-2" result="out2" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

<!-- die Instanzen des Symbols "smilie" -->
  <use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
  <use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
    filter="url(#f1)" />
  <use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
    filter="url(#f2)" />
  <use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
    filter="url(#f3)" />
  <use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
    filter="url(#f4)" />
  <use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
    filter="url(#f5)" />
  <use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
    filter="url(#f6)" />

<!-- Text und Hilfslinien -->
  <text x="145" y="130">feGaussianBlur</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      

Innerhalb der Filter f1 bis f4 werden im obigen Beispiel verschiedene Werte für das Attribut stdDeviation definiert. Auf diese Weise werden unterschiedliche Unschärfen des Quellbildes erzeugt.

Im Filter f5 wird zusätzich noch der primitive Filter feBlend verwendet um den Output von feGaussianBlur mit dem Quellbild zu verschmelzen. Das Objekt smilie hat jetzt quasi einen Hof.
Beachten Sie, dass die Größe des Filterbereichs durch die Attribute x, y width und height im filter-Element entsprechend angepasst wurde, damit der Unschärfe-Effekt komplett dargestellt wird. Wenn der Filterbereich zu klein ist, wird der Effekt teilweise abgeschnitten.

Der Filter f6 erzeugt einen Schatten des referenzierende Objekts. 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.




index  |  Kapitel 14  |  14.7  <<  | 14.8 |  >>  14.9   feOffset