<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 表格僅在瀏覽器中載入

另請參閱