Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).
The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.)
Usage context
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<animate>, <animateTransform>, <set> |
Attributes
Global attributes
- Core attributes
- Presentation attributes
- Filter primitive attributes
- XLink attributes
classstyleexternalResourcesRequired
Specific attributes
DOM Interface
This element implements the SVGFEImageElement interface.
Example
SVG
<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>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| Filter Effects Module Level 1 The definition of '<feImage>' in that specification. |
Working Draft | Added href attribute and deprecated xlink:href. Added crossorigin attribute. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<feImage>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | 4 | Yes | 9 | ? |
href | Yes | Yes | Yes | Yes | Yes | ? |
preserveAspectRatio | ? | ? | ? | ? | ? | ? |
xlink:href | Yes | Yes | 4 | Yes | 9 | ? |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | ? | Yes | Yes | Yes | ? | ? | ? |
href | ? | Yes | Yes | Yes | ? | ? | ? |
preserveAspectRatio | ? | ? | ? | ? | ? | ? | ? |
xlink:href | ? | Yes | Yes | Yes | ? | ? | ? |
See also
<filter><animate><animateTransform><set><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence>- SVG tutorial: Filter effects
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
fscholz,
abbycar,
Sebastianz,
iwarui,
chrisdavidmills,
Spaxe,
Jeremie,
kscarfone,
Manuel_Strehl
Dernière mise à jour par :
fscholz,