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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.10 feMorphology

Der primitive Filter feMorphology verdickt oder verdünnt ein Input-Bild.

Mit dem Attribut operator geben Sie an, ob Sie das Bild verdünnen oder verdicken möchten. Daher akzeptiert operator zwei Werte: der voreingestellte Wert erode verdünnt das Bild, der Wert dilate verdickt das Bild.

Das Ausmaß der Verdünnung oder Verdickung legen Sie durch das Attribut radius fest, das eine oder zwei Zahlen als Wert akzeptiert. Wenn Sie zwei, durch Komma getrennte, Zahlen verwenden bezieht sich die erste Zahl auf den x-Radius und die zweite Zahl auf den y-Radius. Wenn Sie dem Attribut radius nur eine Zahl als Wert zuweisen bezieht sich dieser Wert auf beide Radien.

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 feMorphology</title>
  <desc>
    Beispiele für die Verwendung von feMorphology
  </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 feMorphology -->
    <filter id="f1">
      <feMorphology operator="erode" radius="1" />
    </filter>
    <filter id="f2">
      <feMorphology operator="dilate" radius="1" />
    </filter>
    <filter id="f3">
      <feMorphology radius=".5" />
    </filter>
    <filter id="f4">
      <feMorphology operator="dilate" radius=".5" />
    </filter>
<!-- zusätzlich mit feGaussianBlur, feOffset,
        feTurbulence, feDisplacementMap und feMerge -->
    <filter id="f5"
      x="-.3" y="-.5" width="1.9" height="1.9">
      <feGaussianBlur in="SourceAlpha"
        stdDeviation="2"
        result="out1" />
      <feOffset in="out1"
        dx="4" dy="-.5"
        result="out2" />
      <feTurbulence in="SourceGraphic"
        baseFrequency=".7" type="turbulence"
        result="out3" />
      <feDisplacementMap in="SourceGraphic" in2="out3"
        scale="5"
        result="out4" />
      <feMorphology in="out4"
        operator="erode" radius=".5"
        result="out5" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="out5" />
      </feMerge>
    </filter>
    <filter id="f6"
      x="-.3" y="-.5" width="1.9" height="1.9">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
      <feOffset dx="4" dy="-.5"
        result="out2" />
      <feTurbulence in="SourceGraphic" baseFrequency=".7" type="turbulence"
        result="out3" />
      <feDisplacementMap in="SourceGraphic" in2="out3"
        scale="5" />
      <feMorphology operator="dilate" radius=".5"
        result="out5" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="out5" />
      </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">feMorphology</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      

Die Filter f1 bis f4 zeigen unterschiedliche Effekte des primitiven Filters feMorphology. Die Filter f1 und f3 verwenden den Wert erode für das Attribut operator (Voreinstellung), das Bild wird also verdickt dargestellt. Die Filter f2 und f4 verwenden den Wert dilate, das Bild wird also verdünnt dargestellt.

Die Filter f5 und f6 sind bis auf den Wert für das Attribut operator im primitiven Filter feMorphology identisch. Für f5 wurde erode und für f6 wurde dilate verwendet.

Beachten Sie: Im Filter f6 wird auf alle, nicht unbedingt notwendigen Attribute in und result für die einzelnen Filteroperationen verzichtet. Das Attribut in verwendet als voreingestellten Wert den Output des direkt vorangegangen primitiven Filters im selben filter-Element. Wenn ein solcher Output nicht existiert (weil der primitive Filter der erstplatzierte ist) verwendet in den Wert SourceGraphic.
Das Attribut result muß nur dann ausdrücklich festgelegt werden, wenn ein nicht direkt folgender primitiver Filter im selben filter-Element diesen Output als Input-Bild verwenden soll.

Funktionsweise der Filter f5 und f6:
Durch den primitiven Filter feGaussianBlur wird zuerst das Alphabild weichgezeichnet, danach wird es mit Hilfe von feOffset verschoben. Der so erzeugte Schatten ist das Resultat out2.
Nun wird durch feTurbulence eine Turbulenz im Bereich des Quellbildes erzeugt, die von der folgenden Filteroperation feDisplacementMap als zweites Input-Bild verwendet wird. Das daraus resultierende Output-Bild wird hiernach durch feMorphology verdickt bzw. verdünnt. Das Resultat dieser 3 aufeinanderfolgenden Filter trägt die Bezeichnung out5.
Zuletzt wird feMerge mit seinen Kindern feMergeNode verwendet, um die Outputs out2 und out5 zu vermischen.




index  |  Kapitel 14  |  14.9  <<  | 14.10 |  >>  14.11   feBlend