Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

<feOffset>

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 juillet 2015.

La primitive de filtre <feOffset> permet de décaler l'image qu'elle a en entrée selon les attributs dx et dy.

Contexte d'utilisation

CatégoriesÉlément de primitive 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 SVGFEOffsetElement.

Exemple

SVG

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="offset" width="180" height="180">
      <feOffset in="SourceGraphic" dx="60" dy="60" />
    </filter>
  </defs>

  <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    stroke="black"
    fill="green"
    filter="url(#offset)" />
</svg>

Résultat

Spécifications

Specification
Filter Effects Module Level 1
# feOffsetElement

Compatibilité des navigateurs

Voir aussi