<feGaussianBlur>

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 stdDeviation.

Contexte d'utilisation

CatégoriesÉlément de filtre
Contenu autoriséTout élément de cette liste, quel qu'en soit l'ordre:
<animate>, <set>

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

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

ScreenshotLive sample

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

ScreenshotLive sample

Spécifications

Spécification Statut Commentaire
Filter Effects Module Level 1
La définition de '<feGaussianBlur>' dans cette spécification.		 Version de travail Ajoute l'attribut edgeMode
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<feGaussianBlur>' dans cette spécification.		 Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
feGaussianBlurChrome ? Edge Support complet OuiFirefox Support complet 4IE ? Opera Support complet 9Safari Support complet 9.1WebView Android ? Chrome Android ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
edgeModeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inChrome ? Edge Support complet OuiFirefox Support complet 4IE ? Opera Support complet 9Safari Support complet 9.1WebView Android ? Chrome Android ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
stdDeviationChrome ? Edge Support complet OuiFirefox Support complet 4IE ? Opera Support complet 9Safari Support complet 9.1WebView Android ? Chrome Android ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Dernière modification :

, by MDN contributors
Sujets associés
  1. <feBlend>
  2. <feColorMatrix>
  3. <feComponentTransfer>
  4. <feComposite>
  5. <feConvolveMatrix>
  6. <feDiffuseLighting>
  7. <feDisplacementMap>
  8. <feDistantLight>
  9. <feDropShadow>
  10. <feFlood>
  11. <feFuncA>
  12. <feFuncB>
  13. <feFuncG>
  14. <feFuncR>
  15. <feGaussianBlur>
  16. <feImage>
  17. <feMerge>
  18. <feMergeNode>
  19. <feMorphology>
  20. <feOffset>
  21. <fePointLight>
  22. <feSpecularLighting>
  23. <feSpotLight>
  24. <feTile>
  25. <feTurbulence>
  26. Éléments SVG
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    12. Q-R
      1. <radialGradient>
      2. <rect>
    13. S
      1. <script>
      2. <set>
      3. <stop>
      4. <style>
      5. <svg>
      6. <switch>
      7. <symbol>
    14. T
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    15. U
      1. <use>
    16. V-Z
      1. <view>
      2. <vkern>