Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

SVG/Filter/feMorphology

Aus SELFHTML-Wiki
< SVG‎ | Filter
Wechseln zu: Navigation, Suche

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.[1]

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
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.

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)


Quellen[Bearbeiten]

  1. W3C: feMorphologyElement

Referenz[Bearbeiten]