<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 上檢視此頁面 • 報告此內容的錯誤