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/feTurbulence

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

Der primitive Filter feTurbulence dient der Erzeugung einer Textur.[1]

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel ansehen …
  <filter id="turb1">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.01"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb2">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  ...

  <filter id="turb9">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
In der oberen Reihe können Sie sehen, wie die Werte des baseFrequency-Attributs die Struktur verändern. Kleinere Werte ergeben verschwommene Wellen, größere Werte lassen die Muster kleinteiliger werden. Wenn Sie für x und y zwei verschiedene Werte angeben, wie in der rechten Spalte zu sehen, können Sie die Muster in die Länge, bzw. Breite ziehen.

Auch die Erhöhung des numOctaves-Attributs lässt das Muster kleinteiliger wirken, wie Sie in der 2. Reihe sehen können.

In der unteren Reihe sehen Sie, wie Sie mit type="fractalNoise" fraktales Rauschen erzeugen können.

Folgende Attribute sind möglich:

  • baseFrequency: Grundfrequenz des Rauschens; Zahlwert (oder kommagetrennte Liste zweier Zahlen) für X (und Y), Standardwert ist 0
  • numOctaves: höherer Wert ergibt detailliertere Textur, Standardwert ist 1
  • seed: Zufallszahl, Standardwert ist 0
Diese Zahl ist zwar animierbar, aber es ist nicht möglich immer wieder andere Zafallszahlen zu erzeugen.
Beachten Sie: Die Werte 514, 1977, 2337, 4777, 8032 und 9615 erzeugen im Firefox anstelle einer Glättung große Rechtecke im Bild.[2]
  • stitchTiles: legt fest, ob die Grundfrequenz exakt wie angegeben verwendet wird oder an Höhe oder Breite der Filterunterregion angepasst werden soll
    • stitch: sorgt für glatteren Übergang (Standardwert)
    • noStitch
  • type
    • turbulence: (Standardwert) erzeugt eine Turbulenz (turbulentes Rauschen)
    • fractalNoise: erzeugt fraktales Rauschen

Auf apike.ca können Sie in einer Live-Demo ausprobieren, wie sich die Textur durch Anpassung der Parameter verändert.[3]

Kombination mit anderen Filtern[Bearbeiten]

Wenn Sie den feTurbulence-Filter mit anderen Filtern kombinieren, können Sie viele interessante Effekte erzielen.

Beispiel ansehen …
  <filter id="turb6">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
	 <feColorMatrix type="saturate" values="4" />
  </filter>
  
  <filter id="turb16">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
	 <feColorMatrix type="saturate" values="4" />
	 <feConvolveMatrix 
        order="3" 
        preserveAlpha="true" 
        kernelMatrix="
		   0 -1  0 
		  -1  5 -1 
		   0 -1  0"/>  
  </filter>
In diesem Beispiel werden die mit feTurbulence erzeugten Flächen in ihren Farbwerten geändert.
Die Sättigung kann man mit feColorMatrix verändern, mit feConvolveMatrix erreichen Sie Scharfzeichnungseffekte.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
    <defs>
       <filter id="wolke">
            <feTurbulence type="turbulence" baseFrequency="0.055" numOctaves="5"/>
            <feColorMatrix type="luminanceToAlpha"/>
            <feColorMatrix type="matrix" values="0 0 0 -1 1    0 0 0 -1 1    0 0 0 -1 1   0 0 0 0 1"/>
            <feComponentTransfer>
                <feFuncR type="table" tableValues="0   0    0   .4  1"/>
                <feFuncG type="table" tableValues="0   .15  .5  .9  1"/>
                <feFuncB type="table" tableValues="0   0    1   1  1"/>
                <feFuncA type="linear" slope="1" intercept="0"/>
            </feComponentTransfer>
        </filter>

      <mask id="textMask">
         <text style="fill:white;" x="10" y="60">
         Wolke
         </text>
      </mask>
    </defs>

    <text x="10" y="60" filter="url(#wolke)" mask="url(#textMask)">
    Wolke
    </text>
In diesem Beispiel wird mit dem Filter #wolke eine wolkenähnliche Textur erzeugt. Diese wird dann in einer Maske über den Text gelegt.


Weblinks[Bearbeiten]

Quellen[Bearbeiten]

  1. http://www.w3.org/TR/SVG/filters.html#feTurbulence
  2. https://bugzilla.mozilla.org/show_bug.cgi?id=862225
  3. http://apike.ca/prog_svg_filter_feTurbulence.html#live-demo


sehr schöne Beispiele :

Referenz[Bearbeiten]