SVG-Filters-Effekte-Generator

CSS-Abkürzungen (Blur, Hue-Rotate, Drop-Shadow usw.) sind ein festes Katalog von Effekten, die der Browser auf zugrundeliegende SVG-Filterprimitive abbildet. Ein SVG gibt Ihnen direkten Zugriff auf diese Primitiven – feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix und mehr – und ermöglicht es Ihnen, sie zu Kombinationen (Verzerrungen, Störungen, Emboss, Kanalverarbeitung) zu verbinden, die die Abkürzung nicht ausdrücken kann. Alles, was Sie in CSS tun können, können Sie in SVG tun, aber die Umkehrung ist nicht wahr.

stdDeviation ist die Standardabweichung der Gauss-Verteilung, die benutzt wird, um benachbarte Pixel zu gewichten. Ein größeres Wert verteilt die Gewichtung auf mehr Pixel und erzeugt ein verschwommeneres Ergebnis. Sie können eine Zahl übergeben (gleichmäßige Blurs in beiden Achsen) oder zwei durch Leerzeichen getrennte Zahlen (unterschiedliche Blurs in X und Y) für eine gerichtete Weichheit.

feTurbulence erzeugt prozedural Perlin-artige Störung in ein SVG-Bild, die durch baseFrequency (Störungsskala) und numOctaves (Detailstufen) gesteuert wird. Die Störung allein ist nur eine farbige Textur. feDisplacementMap verwendet diese Störung als in2 und nutzt die R/G-Kanäle, um die Pixel des Quellbilds zu verschieben, wodurch organische Verzerrungen, Rauch, Wasserwellen und Verzerrungseffekte entstehen. Der Skalierungsattribut steuert, wie weit jedes Pixel verschoben werden kann.

feConvolveMatrix verschiebt eine kleine Matrix (der Kernel) über jedes Pixel, multipliziert jedes Feld mit dem entsprechenden Nachbarn und summiert das Ergebnis. Unterschiedliche Kerne erzeugen unterschiedliche Effekte: eine Matrix, die die oberen linken von den unteren rechten Nachbarn abzieht, erzeugt die gerichtete Schattierung, die wir als Emboss lesen; eine Matrix mit -1 um einen positiven Zentrumwert verstärkt die Unterschiede und erzeugt Kantenerkennung oder Schärfung. Das order-Attribut legt die Größe des Kernels (normalerweise 3 für eine 3x3-Matrix) fest, und divisor/bias normalisieren das Ergebnis.

Drei häufige Ursachen: (1) Das -Element ist nicht im DOM, wenn die CSS-Regel angewendet wird – stellen Sie sicher, dass das Filter-SVG direkt in der Seite eingebettet ist, nicht aus einer externen Datei geladen wird, die der Browser blockiert. (2) Die ID, die Sie referenzieren, stimmt nicht mit der ID auf dem -Element überein (fallensensitiv, muss eindeutig sein). (3) Das Element, das gefiltert wird, hat eine Nullgröße oder wird durch das Standardfiltergebiet abgeschnitten – setzen Sie explizite x, y, width, height auf das (oft x="-30%" y="-30%" width="160%" height="160%"), damit Effekte wie Blur oder Drop-Shadow, die außerhalb der Quellgrenzen liegen, nicht abgeschnitten werden.