SVG Gaussian Blur

SVG-filters moeten binnen de <defs>-tag worden gedefinieerd.

Gaussian Blur (Gaussische Vervaging)

De <filter>-tag wordt gebruikt om SVG-filters te definiëren. De <filter>-tag gebruikt de vereiste eigenschap id om te definiëren welke filter aan de grafiek moet worden toegepast?

De <filter>-tag moet worden ingesloten binnen de <defs>-tag. <defs> is een afkorting voor definitions en staat het definiëren van speciale elementen zoals filters toe.

Kopieer onderstaande code naar een notitieblok en sla het bestand op als "filter1.svg". Plaats dit bestand in uw webdirectory:

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

Codeverklaring:

  • De eigenschap id van de <filter>-tag kan een unieke naam definiëren voor het filter (hetzelfde filter kan door meerdere elementen in het document worden gebruikt)
  • De eigenschap filter:url wordt gebruikt om elementen te koppelen aan filters. Bij het koppelen van een filter-id moet het #-teken worden gebruikt
  • Filtereffecten worden gedefinieerd door de <feGaussianBlur>-tag. De achtervoegsel fe kan worden gebruikt voor alle filters
  • De eigenschap stdDeviation van de <feGaussianBlur>-tag kan het mate van vervaging definiëren
  • Deze deel van "in="SourceGraphic"" definieert het effect dat door het hele beeld wordt gecreëerd

Bekijk Voorbeeld

Een voorbeeld van een andere waarde van 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>

Bekijk Voorbeeld