<feComposite>

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年10月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

<feComposite> は SVG のフィルタープリミティブで、Porter-Duff 合成演算（over、in、atop、out、xor、lighter、arithmetic）のいずれかを使用して、画像空間において 2 つの入力画像をピクセル単位で合成します。

他のフィルタープリミティブと同様に、デフォルトで 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>`、`<set>`

属性

in: 指定されたフィルタープリミティブに対する 1 つ目の入力。
in2: 指定されたフィルタープリミティブに対する 2 つ目の入力（in 属性と同様に動作します）。
operator: over | in | out | atop | xor | lighter | arithmetic
k1, k2, k3, k4: arithmetic operator フィルタープリミティブにおいて、結果のピクセルを計算するために使用される値。
フィルタープリミティブ属性: x, y, width, height, result

<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;
}

結果

仕様書

仕様書
Filter Effects Module Level 1 # feCompositeElement

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年6月30日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

<feComposite>

使用コンテキスト

属性

DOM インターフェイス

例

SVG

結果

仕様書

ブラウザーの互換性

関連情報

MDN の改良に協力