files/fr/web/svg/element/fegaussianblur/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

---
title: <feGaussianBlur>
slug: Web/SVG/Element/feGaussianBlur
translation_of: Web/SVG/Element/feGaussianBlur
---
{{SVGRef}}

La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feGaussianBlur>`** applique un effet de flou à l'image en entrée. La quantité de flou est contrôlée par {{SVGAttr("stdDeviation")}}.

## Contexte d'utilisation

{{svginfo}}

## Attributs

### Attributs globaux

- [Attributs de base](/fr/docs/Web/SVG/Attribute#attributs_de_base)
- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#attributs_de_présentation)
- [Attributs de primitives de filtres](/fr/docs/Web/SVG/Attribute#attributs_de_primitives_de_filtre)
- {{SVGAttr("class")}}
- {{SVGAttr("style")}}

### Attributs spécifiques

- {{SVGAttr("in")}}
- {{SVGAttr("stdDeviation")}}
- {{SVGAttr("edgeMode")}}

## Interface DOM

Cet élément implémente l'interface {{domxref("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

{{EmbedLiveSample("Exemple_simple",232,124)}}

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

{{EmbedLiveSample("Exemple_avec_une_ombre_portée",125,124)}}

## Spécifications

| Spécification                                                                                                        | Statut                           | Commentaire                                        |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------- |
| {{SpecName('Filters 1.0', '#feGaussianBlurElement', '&lt;feGaussianBlur&gt;')}}             | {{Spec2('Filters 1.0')}} | Ajoute l'attribut {{SVGAttr("edgeMode")}} |
| {{SpecName('SVG1.1', 'filters.html#feGaussianBlurElement', '&lt;feGaussianBlur&gt;')}} | {{Spec2('SVG1.1')}}         | Définition initiale                                |

## Compatibilité des navigateurs

{{Compat("svg.elements.feGaussianBlur")}}

## Voir aussi

- {{SVGElement("filter")}}
- {{SVGElement("feBlend")}}
- {{SVGElement("feColorMatrix")}}
- {{SVGElement("feComponentTransfer")}}
- {{SVGElement("feComposite")}}
- {{SVGElement("feConvolveMatrix")}}
- {{SVGElement("feDiffuseLighting")}}
- {{SVGElement("feDisplacementMap")}}
- {{SVGElement("feFlood")}}
- {{SVGElement("feImage")}}
- {{SVGElement("feMerge")}}
- {{SVGElement("feMorphology")}}
- {{SVGElement("feOffset")}}
- {{SVGElement("feSpecularLighting")}}
- {{SVGElement("feTile")}}
- {{SVGElement("feTurbulence")}}
- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutorial/Filter_effects)