<feBlend>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<feBlend> SVG 滤镜原语根据特定的混合模式将两个对象组合在一起。这类似于图像编辑软件中混合两个图层。该模式由 mode 属性定义。
使用上下文
属性
DOM 接口
该元素实现了 SVGFEBlendElement 接口。
示例
SVG
html
<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 href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);" /> </svg> 结果
规范
| Specification |
|---|
| Filter Effects Module Level 1 # feBlendElement |