非常教程

SVG参考手册

分类 | Elements

feimage

<feImage>SVG过滤器原语从外部源获取的图像数据并提供该像素数据作为输出(意思是如果外信号源是SVG图像,这是光栅化)。

用法上下文

分类

过滤基元

允许的内容

以任何顺序包含以下任意数量的元素:<animate>,<animateTransform>,<set>

属性

全局属性

  • 核心属性
  • 表现属性
  • 过滤原始属性
  • XLink属性
  • class
  • style
  • externalResourcesRequired

具体属性

  • preserveAspectRatio
  • xlink:href

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>

结果

产品规格

规范

状态

评论

滤镜效果模块级别1该规范中'<feImage>'的定义。

工作草案

添加了href属性并弃用了xlink:href。添加了crossorigin属性。

可缩放矢量图形(SVG)1.1(第二版)该规范中'<feImage>'的定义。

建议

初始定义

浏览器兼容性

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)

?

?

?

?

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。