SVG-Gaussian Blur

SVG-Filter müssen im <defs>-Tag definiert werden

Gaussian Blur (Gaussianische Verwischung)

Das <filter>-Tag wird verwendet, um SVG-Filter zu definieren. Mit welchem Filter wird das <filter>-Tag das auf das Bild angewendete Filter definieren?

Das <filter>-Tag muss innerhalb des <defs>-Tags eingebettet werden. Der <defs>-Tag ist eine Abkürzung für "definitions" und ermöglicht die Definition spezieller Elemente wie Filter

Kopieren Sie den folgenden Code in ein Textverarbeitungsprogramm und speichern Sie die Datei als "filter1.svg". Legen Sie diese Datei in Ihren Web-Ordner ab:

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Code- Erklärung:

  • Das id-Attribut des <filter>-Tags definiert einen eindeutigen Namen für den Filter ( derselbe Filter kann von mehreren Elementen im Dokument verwendet werden)
  • Die Eigenschaft filter:url verknüpft das Element mit einem Filter. Bei der Verknüpfung eines Filter-ID muss das #-Zeichen verwendet werden
  • Filtereffekte werden durch das <feGaussianBlur>-Tag definiert. Der Suffix fe kann für alle Filter verwendet werden
  • Die Eigenschaft stdDeviation des <feGaussianBlur>-Tags kann die Ausmaß der Verwischung definieren
  • Dieser Teil "in="SourceGraphic"" definiert den Effekt, der durch das gesamte Bild erzeugt wird

Beispiel anzeigen

Ein Beispiel für eine andere stdDeviation-Wert

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Beispiel anzeigen