SVG sfocatura - sfocatura gaussiana
Nota: Internet Explorer e Safari non supporta filtri SVG!
<Defs> e <filter>
SVG filtra tutta Internet definito nell'elemento <defs>. <Defs> elemento definisce breve e contiene elementi speciali (come i filtri) Definizione.
<Filter> tag viene utilizzato per definire il filtro SVG. <Filtro> tag con l'attributo id necessaria per definire l'applicazione grafica che filtra?
SVG <feGaussianBlur>
esempio 1
<FeGaussianBlur> elemento viene utilizzato per creare un effetto di sfocatura:
Ecco il codice SVG:
Esempi
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
analisi del codice:
- L'unico nome <filtro> attributo id elemento definisce un filtro
- <FeGaussianBlur> elemento definisce sfocatura
- in = "SourceGraphic" Questa sezione definisce l'effetto creato dalla intera immagine
- attributo stdDeviation definisce la quantità di sfocatura
- Filtrate gli <rect> elemento viene utilizzato per collegare gli elementi a filtro "F1"