<feDropShadow>
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
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:
xml
<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
Attributs
Attributs globaux
Attributs spécifiques
Interface DOM
Cet élément implémente l'interface SVGFEDropShadowElement.
Exemple
SVG
html
<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
| Specification |
|---|
| Filter Effects Module Level 1 # feDropShadowElement |
Compatibilité des navigateurs
Chargement…