<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