SVG/Element/feMorphology

Das feMorphology-Element ist ein primitiver Urfilter, mit dem Sie die Linienränder einer Grafik verdünnen oder verdicken. Hat eine Eingangsgrafik keine Struktur, bleibt sie unverändert.

Syntax

Start-Tag: notwendig

End-Tag: verboten

Elternelemente

Darf vorkommen in:
filter

erlaubte Inhalte

keine

Attribute

Name	Inhalt	Standardwert	Bedeutung
in	CDATA		Eingangsgrafik
operator	erode, dilate	erode	verdünnt (erode) oder verdickt (dilate) die Grafik
radius	NUMBER	0	Radius der Operation

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

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

Siehe auch

• SVG/Tutorials/Filter
• SVG/Tutorials/Text/Filter-Effekte goldig

Weblinks

• W3C(Spezifikation): feMorphology
• apike.ca: feMorphology
• wikibooks.de: Urfilter feMorphology

Live-Beispiel

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.