feImage

feImage滤镜从外部来源取得图像数据，并提供像素数据作为输出（意味着如果外部来源是一个SVG图像，这个图像将被栅格化。）

用法

类别滤镜元素
允许的内容物任意数量、任意排序的下列元素：
<animate>, <animateTransform>, <set>

属性

全局属性

专有属性

DOM 接口

该元素实现了SVGFEImageElement接口。

示例

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>

结果

规格

规范 状态 注释
Filter Effects Module Level 1
<feImage>		 Working Draft 添加了 href 属性并弃用xlink:href。 添加了 crossorigin 属性。
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<feImage>		 Recommendation 初始定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 4.0 (2.0)[1] (Yes) 9.0 ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

[1] 部分支持，请参阅 bug 455986.

图表是基于 these sources 的。

参见