<feBlend>
<feBlend> SVG 滤镜图元根据特定的混合模式将两个对象组合在一起。这类似于在图像编辑软件中混合两个图层时已知的功能。混合模式由 mode 属性定义。
与其它滤镜图元一样，它默认在 linearRGB 颜色空间中处理颜色分量。您可以使用 color-interpolation-filters 属性改为使用 sRGB。
使用语境
属性
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%"
filter="url(#spotlight)" />
</svg>
结果
规范
| 规范 |
|---|
| 滤镜效果模块第 1 级 # feBlendElement |
浏览器兼容性
加载中…