当前位置：文江博客知识库简体中文文档 Web SVG Element feBlend

feBlend - SVG 编辑

feBlend滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性mode定义。

用法

类别	滤镜元素
允许的内容物	任意数量、任意排序的下列元素： `<animate>`, `<set>`

示例

属性

全局属性

专有属性

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>