SVG Gaussisk sløring

SVG-filtre skal defineres inden for <defs>-etiketten

Gaussisk sløring (Gaussian Blur)

<filter>-etiketten bruges til at definere SVG-filtre. Hvad bruges <filter>-etikettens obligatoriske id-attribut til at definere, hvilket filter der skal anvendes på grafikken?

<filter>-etiketten skal indlejres i <defs>-etiketten. <defs>-etiketten er en forkortelse for definitions og muliggør definition af specielle elementer som filtre

Kopier nedenstående kode til en teksteditor, gem filen som "filter1.svg". Sæt denne fil i din webmappe:

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

Kodeforklaring:

  • Id-attributten på <filter>-etiketten kan definere et unikt navn til filteret (samme filter kan bruges af flere elementer i dokumentet)
  • Filter: url-attributten bruges til at linke elementet til et filter. Når der refereres til filterid, skal der bruges #-tegn
  • Filtereffekter defineres gennem <feGaussianBlur>-etiketten. Fe-præfikset kan bruges til alle filtre
  • StdDeviation-attributten på <feGaussianBlur>-etiketten bruges til at definere graden af sløring
  • Denne del af "in="SourceGraphic"" definerer effekten skabt af hele billedet

Se eksempel

En anden eksempel på en stdDeviation værdi, der er forskellig

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

Se eksempel