La balise <feOffset> est une primitive de filtre SVG utilisée pour décaler un élément graphique.
Elle permet de déplacer une ombre ou tout autre effet en modifiant sa position sur l'axe horizontal (dx) et vertical (dy).
Pensez à cette balise comme à un outil pour "pousser" un élément vers un endroit précis, créant ainsi des effets comme des ombres portées ou des surlignages.
Structure et syntaxe de la balise <feOffset>
Structure
Imaginez que vous dessinez un carré, mais vous voulez ajouter une ombre pour lui donner un effet de profondeur.
Plutôt que de dessiner une ombre manuellement, vous pouvez utiliser <feOffset> pour déplacer le flou ou l'ombre générée par un autre filtre, comme <feGaussianBlur>.
C'est comme cela que vous pouvez automatiser et personnaliser l'effet selon vos besoins. 😉
Exemple de base
Voici un exemple simple d'utilisation :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="offsetExample">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" />
<feOffset dx="10" dy="10" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="20" y="20" width="160" height="160" fill="blue" filter="url(#offsetExample)" />
</svg>Dans cet exemple :
<feGaussianBlur>ajoute un flou à l'élément source.<feOffset>décale ce flou de 10 unités à droite (dx="10") et de 10 unités vers le bas (dy="10").<feMerge>fusionne l'effet décalé avec l'image d'origine.
Voici notre résultat :
Bonnes pratiques pour <feOffset>
Quand vous utilisez <feOffset>, pensez à maintenir une cohérence visuelle dans votre design.
Si vous créez des ombres, veillez à ce qu'elles aient toutes la même direction et la même intensité pour simuler une source de lumière réaliste.
Par exemple, si une ombre est décalée de 10 pixels à droite et 5 pixels vers le bas, les autres ombres de votre design devraient suivre la même logique.
Il est également important de tester votre design sur différents écrans pour vous assurer que les décalages ne rendent pas vos éléments graphiques trop éloignés ou désalignés.
Si vous travaillez avec plusieurs éléments, essayez d'ajuster les valeurs dx et dy pour qu'ils s'intègrent harmonieusement dans votre composition.
Enfin, évitez d'utiliser des décalages trop importants, car cela pourrait donner un effet "flottant" à vos éléments graphiques, ce qui peut sembler peu naturel ou désorganisé.
Attributs principaux
| Attribut | Description | Valeurs possibles |
|---|---|---|
dx | Distance de décalage sur l'axe horizontal (droite ou gauche). | Un nombre, positif ou négatif. |
dy | Distance de décalage sur l'axe vertical (haut ou bas). | Un nombre, positif ou négatif. |
in | Spécifie quelle entrée du filtre est utilisée pour appliquer le décalage. | SourceGraphic, SourceAlpha, ou le result d'une autre primitive. |
Compatibilité des navigateurs
La balise <feOffset> est largement prise en charge par les principaux navigateurs modernes :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 10+) |