<feComposite>

**<feComposite>** SVG 滤镜基元在图像空间中使用 Porter-Duff 合成操作之一对两个输入图像进行逐像素组合：over、in、atop、out、xor、lighter 或 arithmetic。

下表显示了使用 MDN 徽标图像与红色圆形组合的每个操作。

操作 描述

over over 运算符

 由 in 属性（MDN 徽标）定义的源图形放置在由 in2 属性（圆形）定义的目标图形之上。

这是默认操作，如果未指定操作或指定了不支持的操作，则将使用此操作。

in in 运算符

 由 in 属性定义的源图形中与由 in2 属性定义的目标图形重叠的部分将替换目标图形。

out out 运算符

 由 in 属性定义的源图形中位于由 in2 属性定义的目标图形之外的部分将显示。

atop atop 运算符

 由 in 属性定义的源图形中与由 in2 属性定义的目标图形重叠的部分将替换目标图形。目标图形中与源图形不重叠的部分保持不变。

xor xor 运算符

 由 in 属性定义的源图形和由 in2 属性定义的目标图形中不重叠的区域将组合在一起。

lighter lighter 运算符

 由 in 属性定义的源图形和由 in2 属性定义的目标图形的总和将显示。

arithmetic arithmetic 运算符

arithmetic 操作对于将来自 <feDiffuseLighting> 和 <feSpecularLighting> 滤镜的输出与纹理数据组合在一起非常有用。如果选择了 arithmetic 操作，则每个结果像素都将使用以下公式计算

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

其中

  • i1 和 i2 表示输入图像的相应像素通道值，分别映射到 in 和 in2
  • k1、k2、k3 和 k4 表示具有相同名称的属性的值。

使用上下文

类别滤镜基元元素
允许的内容以下元素的任意数量，以任意顺序
<animate>、<set>

属性

  • in：给定滤镜基元的第一个输入。
  • in2：给定滤镜基元的第二个输入（与 in 属性的工作方式相同）。
  • operator：over | in | out | atop | xor | lighter | arithmetic
  • k1、k2、k3、k4：用于在 arithmetic operator 滤镜基元中计算结果像素的值。

DOM 接口

此元素实现了 SVGFECompositeElement 接口。

示例

此示例为每个受支持的操作（over、atop、lighter 等）定义了滤镜，这些滤镜将输入 SourceGraphic 与 MDN 徽标的图像组合在一起。每个滤镜都应用于一个圆形元素，然后将其用作 SourceGraphic。

注意：在现代浏览器中，BackgroundImage 不能用作合成源，因此我们无法定义一个使用滤镜下方的任何像素作为源之一进行合成的滤镜。这里采用的方法是一种变通方法，因为我们无法使用 BackgroundImage。

SVG

html
<svg
  style="width:800px; height:400px; display: inline;"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageOver">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="over" />
    </filter>
    <filter id="imageIn">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>
    <filter id="imageOut">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="out" />
    </filter>
    <filter id="imageAtop">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="atop" />
    </filter>
    <filter id="imageXor">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="xor" />
    </filter>
    <filter id="imageArithmetic">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite
        in2="SourceGraphic"
        operator="arithmetic"
        k1="0.1"
        k2="0.2"
        k3="0.3"
        k4="0.4" />
    </filter>
    <filter id="imageLighter">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="lighter" />
    </filter>
  </defs>
  <g transform="translate(0,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#c00"
      style="filter:url(#imageOver)" />
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#c00"
      style="filter:url(#imageIn)" />
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#c00"
      style="filter:url(#imageOut)" />
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#c00"
      style="filter:url(#imageAtop)" />
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#c00"
      style="filter:url(#imageXor)" />
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#c00"
      style="filter:url(#imageArithmetic)" />
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#c00"
      style="filter:url(#imageLighter)" />
    <text x="80" y="-5">lighter</text>
  </g>
</svg>

结果

规范

规范
滤镜效果模块级别 1
# feCompositeElement

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅