<feImage>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.
* Some parts of this feature may have varying levels of support.
<feImage> SVG 滤éåè¯ä»å¤é¨æ¥æºè·åå¾åæ°æ®ï¼å¹¶æä¾åç´ æ°æ®ä½ä¸ºè¾åºï¼è¿æå³çå¦æå¤é¨æ¥æºæ¯ SVG å¾åï¼é£ä¹å®å°è¢«æ
æ ¼åï¼ã
使ç¨ä¸ä¸æ
| ç±»å« | 滤éå ç´ |
|---|---|
| å 许çå 容 | ä»»ææ°éãä»»æ顺åºçä¸åå
ç´ ï¼<animate>ã<animateTransform>ã<discard>ã<set> |
å±æ§
crossoriginpreserveAspectRatioxlink:hrefå·²å¼ç¨
DOM æ¥å£
该å
ç´ å®ç°äº SVGFEImageElement æ¥å£ã
示ä¾
SVG
html
<svg
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200"
height="200">
<defs>
<filter id="image">
<feImage href="mdn_logo_only_color.png" />
</filter>
</defs>
<rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);" />
</svg>
ç»æ
è§è
| Specification |
|---|
| Filter Effects Module Level 1 # feImageElement |
æµè§å¨å ¼å®¹æ§
åè§
- SVG 滤éåè¯å±æ§
flood-colorå±æ§flood-opacityå±æ§<filter><animate><animateTransform><set><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence>- SVG æç¨ï¼æ»¤éææ