<feComposite>

Примитив фильтра <feComposite> SVG выполняет комбинирование двух входных изображений пиксель за пикселем в пространстве изображения с помощью одной из операций наложения Porter-Duff: over, in, atop, out, xor, lighter, или arithmetic.

В таблице ниже показаны каждая из этих операций, используя логотип 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: Первый входной параметр для данного примитива фильтра.
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

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`feComposite`	5	≤18	3	≤12.1	6	18	4	≤12.1	6	1.5	4.4
`in`	5	≤18 До Edge 79 поддерживались `BackgroundImage` и `BackgroundAlpha`.	3	15	6	18	4	14	6	1.5	4.4
`in2`	5	≤18 До Edge 79 поддерживались `BackgroundImage` и `BackgroundAlpha`.	3	15	6	18	4	14	6	1.5	4.4
`k1`	5	≤79	3	15	6	18	4	14	6	1.5	4.4
`k2`	5	≤79	3	15	6	18	4	14	6	1.5	4.4
`k3`	5	≤79	3	15	6	18	4	14	6	1.5	4.4
`k4`	5	≤79	3	15	6	18	4	14	6	1.5	4.4
`operator`	5	≤18	3	15	6	18	4	14	6	1.5	4.4

END_OF_DOCUMENT_MARKER

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite