光栅图片滤镜

前端教程SVG

<feImage> 光栅图片滤镜从外部获取图片并输出为像素数据（光栅化图片数据），这里的外部是指通过 HTTP 从其他网站获取图片，或通过 id 引用同网页的其他图形。

基本语法

<filter id="myFilterJPG" x="0" y="0" width="1" height="1">
  <feImage href="https://common-1301829111.cos.ap-shanghai.myqcloud.com/img%2Fflower-1.jpg" x="" y="" width="" height="" />
</filter>

• href图片地址，可以是 http(s) 网址，也可以是 #imageId

示例

以下的 codepen 演示了 <feImage> 的用法：

• 左图引用的是 JPG 图片
• 右图引用的是 SVG 文件，经过 <feImage> 处理后的结果为光栅化图片像素数据

新窗口打开