<feDropShadow>

La primitive de filtre <feDropShadow> crée une ombre portée pour l'image en entrée. Il s'agit d'un raccourci, le résultat du filtre <feDropShadow> revient à appliquer les primitives suivantes:

<feGaussianBlur in="alpha-channel-of-feDropShadow-in"
    stdDeviation="stdDeviation-of-feDropShadow"/>
<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow"
    result="offsetblur"/>
<feFlood flood-color="flood-color-of-feDropShadow"
    flood-opacity="flood-opacity-of-feDropShadow"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
  <feMergeNode/>
  <feMergeNode in="in-of-feDropShadow"/>
</feMerge>

Contexte d'utilisation

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

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

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

Exemple

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="4" dy="8" stdDeviation="4"/>
    </filter>
  </defs>

  <circle cx="50%" cy="50%" r="80"
      style="fill:blue; filter:url(#shadow);"/>
</svg>

Résultat

Spécifications

Spécification Statut Commentaire
Filter Effects Module Level 1
La définition de '<feDistantLight>' dans cette spécification.
Version de travail 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
Support simpleChrome Support complet OuiEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
dyChrome Support complet OuiEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
dxChrome Support complet OuiEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
inChrome Support complet OuiEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
stdDeviationChrome Support complet OuiEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

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