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

属性

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

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年3月19日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content