From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/svg/element/fegaussianblur/index.html | 141 +++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 files/fr/web/svg/element/fegaussianblur/index.html (limited to 'files/fr/web/svg/element/fegaussianblur/index.html') diff --git a/files/fr/web/svg/element/fegaussianblur/index.html b/files/fr/web/svg/element/fegaussianblur/index.html new file mode 100644 index 0000000000..d035647b55 --- /dev/null +++ b/files/fr/web/svg/element/fegaussianblur/index.html @@ -0,0 +1,141 @@ +--- +title: +slug: Web/SVG/Element/feGaussianBlur +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feGaussianBlur +--- +
{{SVGRef}}
+ +

La primitive de filtre 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 spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEGaussianBlurElement")}}.

+ +

Exemple

+ +

Exemple simple

+ +

SVG

+ +
<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,"/files/4227/feGaussianBlur.png")}}

+ +

Exemple d'ombre portée

+ +

SVG

+ +
<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_d'ombre_portée",125,124,"/files/4229/feGaussianBlur-dropshadow.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feGaussianBlurElement', '<feGaussianBlur>')}}{{Spec2('Filters 1.0')}}Ajoute l'attribut {{SVGAttr("edgeMode")}}
{{SpecName('SVG1.1', 'filters.html#feGaussianBlurElement', '<feGaussianBlur>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf