非常教程

SVG参考手册

分类 | Elements

feblend

The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the mode attribute.

用法上下文

分类

过滤基元

允许的内容

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

属性

全局属性

  • Core attributes
  • Presentation attributes
  • Filter primitive attributes
  • class
  • style

具体属性

  • in
  • in2
  • mode

DOM接口

这个元素实现了SVGFEBlendElement接口。

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
          flood-color="green" flood-opacity="1"/>
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
    </filter>
  </defs>

  <image xlink:href="/files/6457/mdn_logo_only_color.png"
      x="10%" y="10%" width="80%" height="80%"
      style="filter:url(#spotlight);"/>
</svg>

结果

产品规格

Specification

Status

Comment

Filter Effects Module Level 1The definition of '<feBlend>' in that specification.

Working Draft

Outsourced blend modes to Compositing and Blending Level 1

Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<feBlend>' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

(Yes)

4.0 (2.0)

(Yes)

9.0

?

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

(Yes)

?

?

?

?

SVG

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