<filter>

Aller à :
  1. Contexte d'utilisation
  2. Attributs
  3. Interface DOM
  4. Exemple
  5. Spécifications
  6. Compatibilité des navigateurs
  7. Voir aussi

L'élément SVG <filter> sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut filter sur un élément SVG ou via la propriété  CSS filter.

Contexte d'utilisation

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

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

Cet élément implémente l'interface SVGFilterElement.

Exemple

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

Spécifications

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
filterChrome Support complet 1Edge Support complet OuiFirefox Support complet 4IE Support complet 10Opera Support complet 9Safari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android ? Opera Android Support complet 10.1Safari iOS Support complet 3Samsung Internet Android ?
filterResChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
filterUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
heightChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
primitiveUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
widthChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Obsolète
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
yChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : mdnwebdocs-bot, a-mt
Dernière mise à jour par : mdnwebdocs-bot,