<feOffset>

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 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

<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

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
feOffsetChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
dxChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
dyChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
inChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Dernière modification :

, by MDN contributors
Sujets associés
  1. <feBlend>
  2. <feColorMatrix>
  3. <feComponentTransfer>
  4. <feComposite>
  5. <feConvolveMatrix>
  6. <feDiffuseLighting>
  7. <feDisplacementMap>
  8. <feDistantLight>
  9. <feDropShadow>
  10. <feFlood>
  11. <feFuncA>
  12. <feFuncB>
  13. <feFuncG>
  14. <feFuncR>
  15. <feGaussianBlur>
  16. <feImage>
  17. <feMerge>
  18. <feMergeNode>
  19. <feMorphology>
  20. <feOffset>
  21. <fePointLight>
  22. <feSpecularLighting>
  23. <feSpotLight>
  24. <feTile>
  25. <feTurbulence>
  26. Éléments SVG
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    12. Q-R
      1. <radialGradient>
      2. <rect>
    13. S
      1. <script>
      2. <set>
      3. <stop>
      4. <style>
      5. <svg>
      6. <switch>
      7. <symbol>
    14. T
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    15. U
      1. <use>
    16. V-Z
      1. <view>
      2. <vkern>