<feGaussianBlur>
Baseline
Large disponibilité
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2018.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La primitive de filtre SVG <feGaussianBlur> applique un effet de flou à l'image en entrée. La quantité de flou est définie par l'attribut stdDeviation, qui décrit la courbe en cloche du flou gaussien.
Comme les autres primitives de filtres, elle traite les composantes colorimétriques dans l'espace colorimétrique linearRGB par défaut. L'attribut color-interpolation-filters permet d'utiliser sRGB à la place.
Contexte d'utilisation
Attributs
Interface DOM
Cet élément implémente l'interface SVGFEGaussianBlurElement.
Exemple
Exemple simple
SVG
html
<svg
width="230"
height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
Résultat
Exemple avec une ombre portée
SVG
html
<svg
width="120"
height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)" />
</svg>
Résultat
Spécifications
| Spécification |
|---|
| Filter Effects Module Level 1 # feGaussianBlurElement |
Compatibilité des navigateurs
Voir aussi
- Attributs SVG pour les primitives de filtres
- L'élément
<filter> - L'élément
<feBlend> - L'élément
<feColorMatrix> - L'élément
<feComponentTransfer> - L'élément
<feComposite> - L'élément
<feConvolveMatrix> - L'élément
<feDiffuseLighting> - L'élément
<feDisplacementMap> - L'élément
<feFlood> - L'élément
<feImage> - L'élément
<feMerge> - L'élément
<feMorphology> - L'élément
<feOffset> - L'élément
<feSpecularLighting> - L'élément
<feTile> - L'élément
<feTurbulence> - Tutoriel SVG : Filtres