SVG/Tutorials/Filter/feMorphology

Mit dem primitiven Filter feMorphology können Sie die Linienränder einer Grafik verdünnen oder verdicken. Hat eine Eingangsgrafik keine Struktur, bleibt sie unverändert.

Folgende Attribute sind möglich:

• operator:
  • erode: verdünnt die Struktur (Standardwert)
  • dilate: verdickt
• radius: Radius der Operation, nichtnegative Zahl oder Liste zweier nichtnegativer Zahlen für X- und Y-Koordinaten (Standardwert ist 0)

Beispiel ansehen …

    <filter id="f1">
      <feMorphology operator="erode" radius="1" />
    </filter>
    <filter id="f2">
      <feMorphology operator="dilate" radius="1" />
    </filter>

    <filter id="f3"
      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="f4"
      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>

Der Filter feMorphology verdickt oder verdünnt die Randlinien der Eingangsgrafik. In der 2. Spalte können Sie die Auswirkungen sehen.
In der 3. Spalte wurde feMorphology zusätzlich mit feGaussianBlur, feOffset, feTurbulence, feDisplacementMap und feMerge kombiniert. Die Randlinien sehen nun so unregelmäßig aus, dass sie gezeichnet sein könnten.

Quellen

• apike.ca: feMorphology
• wikibooks.de: Urfilter feMorphology

Referenz

• SVG/Elemente/feMorphology