<feImage>

La primitive de filtre SVG <feImage> extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster)

Contexte d'utilisation

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

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

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

Exemple

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="image">
      <feImage xlink:href="/files/6457/mdn_logo_only_color.png"/>
    </filter>
  </defs>

  <rect x="10%" y="10%" width="80%" height="80%"
      style="filter:url(#image);"/>
</svg>

Spécifications

Spécification Statut Commentaire
Filter Effects Module Level 1
La définition de '<feImage>' dans cette spécification.		 Version de travail Ajoute l'attribut href et déprécie xlink:href. Ajoute l'attribut crossorigin.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<feImage>' 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
feImageChrome Support complet OuiEdge Support complet 12Firefox Support complet 4IE Support complet OuiOpera Support complet 9Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
hrefChrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet 12.1WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS Support complet 12.2Samsung Internet Android Support complet Oui
preserveAspectRatioChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Obsolète
Chrome Support complet OuiEdge Support complet 12Firefox 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 Support complet Oui

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Voir aussi

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>