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) |
? |
? |
? |
? |