SVG flou - flou gaussien
Remarque: Internet Explorer et Safari ne supporte pas les filtres SVG!
<Defs> et <filtre>
SVG filtre tout Internet définis dans <defs> élément. <Defs> définit court et contient des éléments spéciaux (tels que les filtres) définition.
<Filtre> est utilisé pour définir le filtre SVG. <Filtre> avec l'attribut id requis pour définir l'application graphique qui filtre?
SVG <feGaussianBlur>
exemple 1
<FeGaussianBlur> est utilisé pour créer un effet de flou:
Voici le code SVG:
Exemples
<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>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
Analyse de code:
- Le seul nom <filter> attribut élément id définit un filtre
- <FeGaussianBlur> élément définit le flou
- in = "SourceGraphic" Cette section définit l'effet créé par l'image entière
- attribut stdDeviation définit la quantité de flou
- Filtre Propriétés <rect> est utilisé pour relier les éléments à "f1" filtre