<feComposite>

Baseline 已广泛支持

此特性已成熟稳定，适用于多种设备和浏览器版本。自 2018 年 10 月起，它已在各浏览器中可用。

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

与其它滤镜图元一样，它默认在 linearRGB 颜色空间中处理颜色分量。您可以使用 color-interpolation-filters 属性改为使用 sRGB。

下表展示了使用 MDN 徽标图像与红色圆圈合成的每种操作：

操作	描述
over	由 `in` 属性定义的源图形（MDN 徽标）放置在由 `in2` 属性定义的目标图形（圆圈）之上。这是默认操作，如果未指定操作或指定了不受支持的操作，则将使用此操作。
in	由 `in` 属性定义的源图形与由 `in2` 属性定义的目标图形重叠的部分，替换目标图形。
out	由 `in` 属性定义的源图形中，不与由 `in2` 属性定义的目标图形重叠的部分，将被显示。
atop	由 `in` 属性定义的源图形中，与由 `in2` 属性定义的目标图形重叠的部分，替换目标图形。不与源图形重叠的目标图形部分保持不变。
xor	由 `in` 属性定义的源图形和由 `in2` 属性定义的目标图形的非重叠区域被组合。
lighter	显示由 `in` 属性定义的源图形和由 `in2` 属性定义的目标图形的像素值之和。
arithmetic	`arithmetic` 操作对于将 `<feDiffuseLighting>` 和 `<feSpecularLighting>` 滤镜的输出与纹理数据相结合非常有用。如果选择 `arithmetic` 操作，则每个结果像素的计算使用以下公式： result = k1i1i2 + k2i1 + k3i2 + k4 其中 `i1` 和 `i2` 表示输入图像的相应像素通道值，分别映射到 `in` 和 `in2`。 `k1`、`k2`、`k3` 和 `k4` 表示具有相同名称的属性的值。

使用语境

分类	滤镜图元元素
允许内容	可包含任意数量、任意顺序的下列元素 `<animate>`、`<discard>`、`<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 的解决方法，因为我们无法使用 BackgroundImage。

SVG

html

<svg
  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="#cc0000"
      filter="url(#imageOver)" />
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageIn)" />
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOut)" />
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageAtop)" />
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageXor)" />
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageArithmetic)" />
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageLighter)" />
    <text x="80" y="-5">lighter</text>
  </g>
</svg>

svg {
  width: 800px;
  height: 400px;
  display: inline;
}

结果

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025年8月13日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的错误