SVG gaussowy rozmycie

SVG filtry muszą być zdefiniowane wewnątrz etykiety <defs>.

Zmazy gaussowskie (Gaussian Blur)

Etykieta <filter> służy do definiowania filtrów SVG. Jakie filtrowanie ma być zastosowane do grafiki, definiowane jest za pomocą wymaganego atrybutu id?

Etykieta <filter> musi być umieszczona wewnątrz etykiety <defs>. Etykieta <defs> to skrót od definitions, która pozwala na definiowanie specjalnych elementów, takich jak filtry.

Skopiuj poniższy kod do notatnika, a następnie zapisz plik jako "filter1.svg". Umieść ten plik w swojej katalogu internetowym:

?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>

Wyjaśnienie kodu:

  • Atrybut id etykiety <filter> może przypisać unikalną nazwę filtrowi (ten sam filtr może być używany przez wiele elementów w dokumencie)
  • Atrybut filter:url służy do łączenia elementów z filtrem. Podczas łączenia id filtra, należy użyć znaku #
  • Efekt filtra jest definiowany przez etykietę <feGaussianBlur>. Przedrostek fe można używać dla wszystkich filtrów
  • Atrybut stdDeviation etykiety <feGaussianBlur> może definiować stopień rozmycia
  • Część in="SourceGraphic" definiuje efekt stworzony przez całe zdjęcie

Zobacz przykład

Przykład innej wartości stdDeviation

?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>

Zobacz przykład