SVG/Filter/feTurbulence

Aus SELFHTML-Wiki
< SVG‎ | Filter(Weitergeleitet von FeTurbulence)
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]